Šta je svojstvo box-sizing: border-box i koju ulogu ima u CSS-u?

Svojstvo box-sizing određuje kako se računa ukupna širina i visina elementa.

box-sizing: content-box (podrazumevana vrednost) — širina i visina odnose se samo na sadržaj (content). Padding i border se dodaju na navedene vrednosti širine/visine.

box-sizing: border-box — širina i visina uključuju padding i border. content se smanjuje da stane unutar navedenih dimenzija.

Uloga box-sizing: border-box u CSS:

• Pojednostavljenje kalkulacija: Olakšava računanje dimenzija elemenata, posebno pri korišćenju padding i border.
• Predvidivost u rasporedu: Omogućava precizno određivanje veličina blokova, nezavisno od padding i border, čime je raspored predvidljiviji.
• Praktičnost u modelu kutije: Usklađuje se sa intuitivnim razumevanjem veličine bloka — njegovih granica. Olakšava kreiranje mreža i komponenti fiksne veličine.

Primer:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Ukupna širina = 100 + 10*2 + 1*2 = 122px */
  /* Ukupna visina = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Ukupna širina = 100px */
  /* Ukupna visina = 100px */
  /* Sadržaj će zauzeti 100 - 10*2 - 1*2 = 78px po širini i visini */
}