Kaip savybė box-sizing veikia elemento dydį?

CSS savybė box-sizing nustato, kaip skaičiuojami elemento matmenys — ar įtraukiami ar ne į vidinius (padding) ir kraštines (border).

• Reikšmė content-box (numatytoji): elemento plotis ir aukštis apibrėžia tik turinį. Vidiniai tarpai ir kraštinės pridedami prie šių matmenų, padidindami galutinį dydį.

• Reikšmė border-box: plotis ir aukštis apima turinį, vidinius tarpus ir kraštines. Tai reiškia, kad jei nustatysite plotį 100px, turinys bus sumažintas atsižvelgiant į padding ir border, kad galutinis dydis išliktų 100px.

Pavyzdys:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

Šiuo atveju, .box elementas turės bendrą plotį 200px, įskaitant padding ir border. Jei būtų content-box, bendras plotis būtų 200 + 210 + 25 = 230px.

Naudojant border-box, dažnai supaprastėja maketavimas, nes elementų matmenys "nepabėga" dėl padding ir border.