Mis on box-sizing: border-box omadus ja millist rolli see CSS-is mängib?

box-sizing omadus määrab, kuidas arvutatakse elemendi kogulaius ja -kõrgus.

box-sizing: content-box (vaikimisi väärtus) — laius ja kõrgus viitavad ainult sisule (content). Padding ja border lisatakse määratud laiusele ja kõrgusele.

box-sizing: border-box — laius ja kõrgus hõlmavad padding ja border. Sisu (content) surutakse kokku, et mahutada määratud mõõtmetesse.

CSS-is box-sizing: border-box roll:

• Arvutuste lihtsustamine: Teeb elementide suuruste arvutamise lihtsamaks, eriti kasutades padding ja border.
• Eelennustatav paigutus: Võimaldab täpselt määrata blokkide suurused, sõltumata padding ja border, muutes paigutuse eelennustatavaks.
• Mugavus kastimudelil: Vastab intuitiivsele arusaamale blokki suurusest — selle äärtest. Lihtsustab võrkude ja fikseeritud suurusega komponentide loomist.

Näide:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Kokkuvõte laius = 100 + 10*2 + 1*2 = 122px */
  /* Kokkuvõte kõrgus = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Kokkuvõte laius = 100px */
  /* Kokkuvõte kõrgus = 100px */
  /* Sisu hõivab 100 - 10*2 - 1*2 = 78px laiuses ja kõrguses */
}