Kas yra box-sizing: border-box savybė ir kokią vaidmenį ji atlieka CSS?

box-sizing savybė nustato, kaip apskaičiuojamas bendras elemento plotis ir aukštis.

box-sizing: content-box (numatytoji reikšmė) — plotis ir aukštis taikomi tik turiniui (content). Padding ir border pridedami prie nurodytų plotčio ir aukščio reikšmių.

box-sizing: border-box — plotis ir aukštis apima padding ir border. Turinys (content) susitraukia, kad tilptų į nurodytus matmenis.

CSS box-sizing: border-box vaidmuo:

• Supaprastinti skaičiavimus: Lengvina elementų dydžių skaičiavimą, ypač naudojant padding ir border.
• Numatytas išdėstymo patikimumas: Leidžia tiksliai nustatyti blokų dydį, nepriklausomai nuo padding ir border, todėl išdėstymas tampa patikimesnis.
• Patogumas dėžutės modelyje: Atitinka intuityvų supratimą apie bloko dydį — jo rėmus. Palengvina tinklelių ir fiksuoto dydžio komponentų kūrimą.

Pavyzdys:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Bendras plotis = 100 + 10*2 + 1*2 = 122px */
  /* Bendras aukštis = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Bendras plotis = 100px */
  /* Bendras aukštis = 100px */
  /* Turinys užims 100 - 10*2 - 1*2 = 78px plotį ir aukštį */
}