Sarlavha bilan Div yorlig'i chegarasi

Chegarani chegara ichidagi sarlavhasi bilan div yorlig'i atrofida ko'rsatish kerak. Buni amalga oshirish uchun men hozirgacha shu bilan shug'ullanganman

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.componentWrapper {
  border: solid cadetblue;
  border-radius: 40px;
  padding: 10px;
  width: 95%;
}
    
.componentTitle {
  font-size: 18px;
  width: 15%;
  background-color: white;
  margin-top: -25px;
}
 <div class='componentWraper'>
This is the title

This is the component body text</div>
</div> </div>

Ko'rib turganingizdek, chegara ustidagi sarlavhani surish uchun men margin xususiyatidan foydalanmoqdaman. Buni amalga oshirishning to'g'ri yo'li yoki yo'qligini bilmayman va quyidagi savollarga javob beraman.

  1. Sarlavha piksel (margin) va sobit qiymat (-25px) dan foydalanib joylashtiryapman. Bu mobil telefonlar, planshetlar bilan ishlaydigan sayt. Bu maqbul yondashuvmi?
  2. Chegaraning matn orqasida ko'rinmasligi uchun, fon rangini oq rangga aylantiraman, bu yaxshi yondashuvmi?
  3. Buning uchun yaxshiroq va ko'proq maqbul yo'l bormi? Bordiyani boshqarish uchun cheklov yo'qligi sababli, men fieldsetni ishlatmoqchi emasman.
0
Aytgancha, CSS tarkibida 'componentWrapper' (ikkilamchi p) va HTML tarkibida componentWraper (single p) mavjud. Buni asl kodingizda tuzatish mumkin.
qo'shib qo'ydi muallif Yvonne Aburrow, manba
Aytgancha, CSS tarkibida 'componentWrapper' (ikkilamchi p) va HTML tarkibida componentWraper (single p) mavjud. Buni asl kodingizda tuzatish mumkin.
qo'shib qo'ydi muallif Yvonne Aburrow, manba

6 javoblar

O'ylaymanki, siz to'g'ri yo'ldan ketmoqdasiz. Men uslubni yanada nazorat qilish uchun bir necha o'zgarishlarni amalga oshirgan bo'lardim. Siz ems yoki pixels dan foydalanishingiz mumkin.

Sarlavhani va mazmunni yangi divga joylashtiring va bu salbiy marginni bering:

<div class='componentWrapper'>
  <div>
    <div class='componentTitle'>This is the title</div>
    <div class='componentContent'>
      
This is the component body text

</div> </div> .componentWrapper div { margin-top: -1em; }

Set your title to display: inline-block and use padding to control the white space around it (instead of using width)

.componentTitle {
  font-size: 18px;
  background-color: white;
  display: inline-block;
  padding: .5em;
}

codepen

snippet:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.componentWrapper {
  border: solid cadetblue;
  border-radius: 40px;
  padding: 10px;
  width: 95%;
  margin-top: 1em;
}

.componentWrapper div {
  margin-top: -1.2em;
}

.componentTitle {
  font-size: 18px;
  background-color: white;
  display: inline-block;
  padding: .5em .3em;
}
<div class='componentWrapper'>
  <div>
    <div class='componentTitle'>This is the title</div>
    <div class='componentContent'>
      
This is the component body text

</div> </div>
</div> </div>
2
qo'shib qo'ydi

O'ylaymanki, siz to'g'ri yo'ldan ketmoqdasiz. Men uslubni yanada nazorat qilish uchun bir necha o'zgarishlarni amalga oshirgan bo'lardim. Siz ems yoki pixels dan foydalanishingiz mumkin.

Sarlavhani va mazmunni yangi divga joylashtiring va bu salbiy marginni bering:

<div class='componentWrapper'>
  <div>
    <div class='componentTitle'>This is the title</div>
    <div class='componentContent'>
      
This is the component body text

</div> </div> .componentWrapper div { margin-top: -1em; }

Set your title to display: inline-block and use padding to control the white space around it (instead of using width)

.componentTitle {
  font-size: 18px;
  background-color: white;
  display: inline-block;
  padding: .5em;
}

codepen

snippet:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

.componentWrapper {
  border: solid cadetblue;
  border-radius: 40px;
  padding: 10px;
  width: 95%;
  margin-top: 1em;
}

.componentWrapper div {
  margin-top: -1.2em;
}

.componentTitle {
  font-size: 18px;
  background-color: white;
  display: inline-block;
  padding: .5em .3em;
}
<div class='componentWrapper'>
  <div>
    <div class='componentTitle'>This is the title</div>
    <div class='componentContent'>
      
This is the component body text

</div> </div>
</div> </div>
2
qo'shib qo'ydi

Bunga erishish uchun uchta mantiqiy usul mavjud.

  1. You can use a
    with a legend which is the basic HTML way of doing this. You can find more information about this here.
  2. Use custom CSS with positioning, not negative margins or etc.:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

body {
  background: #fff;
}

.componentWraper {
  margin: 40px; /* just for contrast */
  position: relative;
  border: 2px solid tomato;
  border-radius: 12px;
  padding: 20px;
}

.componentWraper .componentTitle {
  position: absolute;
  top: -25px;
  background: #fff;
  padding: 0 10px;
}
<div class='componentWraper'>
  
This is the title

This is the component body text</div>
</div> </div>
  1. Pseudo-elements bilan maxsus CSS-dan foydalaning:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

body {
  background: #fff;
}

.componentWraper {
  margin: 40px; /* just for contrast */
  position: relative;
  border: 2px solid tomato;
  border-radius: 12px;
  padding: 20px;
}

.componentWraper::before {
  content: 'This is the title';
  position: absolute;
  top: -10px;
  padding: 0 10px;
  background: #fff;
}
<div class='componentWraper'>This is the component body text</div>
</div> </div>
1
qo'shib qo'ydi
Eng yuqori va yuqori margin-to'pdan foydalanishning afzalligi nima? Mobil telefonga o'tgandan so'ng, bu o'zgarishmi?
qo'shib qo'ydi muallif tmp dev, manba
Noto'g'ri joylashtirish o'rniga joylashishni aniqlashdan foydalanish - bu yaxshi variant, chunki u qo'shimcha tartibsizliklarga olib keladigan nisbiy elementlarga ta'sir qilmaydi. Ha, u uyali telefonda bir xil bo'ladi, siz ba'zi rezolyutsiyalar uchun kenglikni o'zgartirishi mumkin.
qo'shib qo'ydi muallif snkv, manba

Bunga erishish uchun uchta mantiqiy usul mavjud.

  1. You can use a
    with a legend which is the basic HTML way of doing this. You can find more information about this here.
  2. Use custom CSS with positioning, not negative margins or etc.:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

body {
  background: #fff;
}

.componentWraper {
  margin: 40px; /* just for contrast */
  position: relative;
  border: 2px solid tomato;
  border-radius: 12px;
  padding: 20px;
}

.componentWraper .componentTitle {
  position: absolute;
  top: -25px;
  background: #fff;
  padding: 0 10px;
}
<div class='componentWraper'>
  
This is the title

This is the component body text</div>
</div> </div>
  1. Pseudo-elements bilan maxsus CSS-dan foydalaning:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

body {
  background: #fff;
}

.componentWraper {
  margin: 40px; /* just for contrast */
  position: relative;
  border: 2px solid tomato;
  border-radius: 12px;
  padding: 20px;
}

.componentWraper::before {
  content: 'This is the title';
  position: absolute;
  top: -10px;
  padding: 0 10px;
  background: #fff;
}
<div class='componentWraper'>This is the component body text</div>
</div> </div>
1
qo'shib qo'ydi
Eng yuqori va yuqori margin-to'pdan foydalanishning afzalligi nima? Mobil telefonga o'tgandan so'ng, bu o'zgarishmi?
qo'shib qo'ydi muallif tmp dev, manba
Noto'g'ri joylashtirish o'rniga joylashishni aniqlashdan foydalanish - bu yaxshi variant, chunki u qo'shimcha tartibsizliklarga olib keladigan nisbiy elementlarga ta'sir qilmaydi. Ha, u uyali telefonda bir xil bo'ladi, siz ba'zi rezolyutsiyalar uchun kenglikni o'zgartirishi mumkin.
qo'shib qo'ydi muallif snkv, manba

Bu men bilan kelgan narsa. Men salbiy margindan qutulmoqchi bo'ldim, lekin bunga yo'l topishim mumkin emas edi.

See the Pen ofset nomi by Yvonne Aburrow (@vogelbeere) on CodePen.

HTML

<div class="componentWrapper">This is the component body text</div>

CSS

.componentWrapper {
  border: 1px solid blue;
  border-radius: 40px;
  padding: 16px;
  width: 95%;
  margin: 3em;
}

.componentWrapper:before {
  content: "this is the title";
  font-size: 18px;
  width: 10%;
  background-color: white;
  border: 1px solid blue;
  border-radius: 12px;
  display: block;
  margin-top: -29px;
  padding: 3px;
}

CSS-da joylashgan sarlavha matnini ekranli o'quvchi bilan qanday muomalada bo'lishiga ishonchim komil emas (yoki juda ko'p turli nomlar mavjud bo'lsa, uni qanday o'lchash kerakligini bilib olasiz).

0
qo'shib qo'ydi

Bu men bilan kelgan narsa. Men salbiy margindan qutulmoqchi bo'ldim, lekin bunga yo'l topishim mumkin emas edi.

See the Pen ofset nomi by Yvonne Aburrow (@vogelbeere) on CodePen.

HTML

<div class="componentWrapper">This is the component body text</div>

CSS

.componentWrapper {
  border: 1px solid blue;
  border-radius: 40px;
  padding: 16px;
  width: 95%;
  margin: 3em;
}

.componentWrapper:before {
  content: "this is the title";
  font-size: 18px;
  width: 10%;
  background-color: white;
  border: 1px solid blue;
  border-radius: 12px;
  display: block;
  margin-top: -29px;
  padding: 3px;
}

CSS-da joylashgan sarlavha matnini ekranli o'quvchi bilan qanday muomalada bo'lishiga ishonchim komil emas (yoki juda ko'p turli nomlar mavjud bo'lsa, uni qanday o'lchash kerakligini bilib olasiz).

0
qo'shib qo'ydi