Kas ir box-sizing: border-box īpašība un kādu lomu tā spēlē CSS?

box-sizing īpašība nosaka, kā tiek aprēķināta kopējā elementa platums un augstums.

box-sizing: content-box (noklusējuma vērtība) — platums un augstums attiecas tikai uz saturu (content). Padding un border tiek pievienoti norādītajām platuma un augstuma vērtībām.

box-sizing: border-box — platums un augstums ietver padding un border. Saturs (content) tiek saīsināts, lai tas ietilptu norādītajās dimensijās.

CSS lomā box-sizing: border-box:

• Vienkāršo aprēķinus: Atvieglo elementu izmēru aprēķinu, īpaši, izmantojot padding un border.
• Prognozējamu izkārtojumu: Ļauj precīzi noteikt bloku izmērus, neatkarīgi no padding un border, padarot izkārtojumu prognozējamāku.
• Ērtība kastu modelī: Atbilst intuitīvai izpratnei par bloka izmēru — tā rāmjiem. Atvieglo režģu un fiksēta izmēra komponentu izveidi.

Piemērs:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Kopējā platums = 100 + 10*2 + 1*2 = 122px */
  /* Kopējais augstums = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Kopējais platums = 100px */
  /* Kopējais augstums = 100px */
  /* Saturs aizņems 100 - 10*2 - 1*2 = 78px platumā un augstumā */
}