Mis vahe on box-sizing: content-box ja border-box vahel?

Erinevus box-sizing: content-box ja box-sizing: border-box vahel seisneb selles, kuidas brauser arvutab elemendi kogumõõtmeid:

• content-box (vaikimisi väärtus): laius ja kõrgus määravad ainult sisu. Nendele mõõtmetele lisanduvad sisemised vahed (padding) ja ääred (border), suurendades elemendi lõplikku suurust.

• border-box: laius ja kõrgus hõlmavad sisu, paddingut ja borderit. Teisisõnu, padding ja border "sobivad" määratud mõõtmetesse.

Näide:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: content-box; /* või border-box */
}

• content-box-iga on kogulaius: 200 + 102 + 52 = 230px.
• border-box-iga jääb kogulaius 200px ning sisu vähendatakse, et mahutada padding ja border.

border-box kasutamine on sageli mugavam, kuna elementide mõõtmed "ei paisu" paddingi ja borderi tõttu.