Kuidas mõjutab box-sizing omadus elemendi suurust?

CSS box-sizing omadus määrab, kuidas elementide mõõtmed arvutatakse — kas arvestatakse või mitte sisemisi vahemaid (padding) ja raame (border).

• Väärtus content-box (vaikimisi): elementi laius ja kõrgus määravad ainult sisu. Sisevahed ja raamid lisanduvad nendele mõõtudele, suurendades kogu suurust.

• Väärtus border-box: laius ja kõrgus hõlmavad sisu, sisemisi vahemaid ja raame. See tähendab, et kui määrate laius 100px, siis sisu vähendatakse paddingi ja raami arvestades, et kogu suurus jääks 100px.

Näide:

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

Selles olukorras on .box elemendi kogulaius 200px, kaasa arvatud padding ja border. Kui see oleks content-box, oleks kogulaius 200 + 210 + 25 = 230px.

border-box kasutamine lihtsustab sageli paigutust, kuna elementide mõõtmed ei "hüppa" paddingi ja borderi tõttu.