Kako svojstvo box-sizing utiče na veličinu elementa?

CSS svojstvo box-sizing određuje kako se računaju dimenzije elementa — uključuju li ili ne unutrašnje margine (padding) i granice (border).

• Vrednost content-box (podrazumevana): širina i visina elementa određuju samo sadržaj. Unutrašnje margine i granice se dodaju tim dimenzijama, povećavajući ukupnu veličinu elementa.

• Vrednost border-box: širina i visina uključuju sadržaj, unutrašnje margine i granice. To znači da ako postavite širinu od 100px, sadržaj će biti smanjen uzimajući u obzir padding i border kako bi ukupna veličina ostala 100px.

Primer:

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

U ovom slučaju, element .box će imati ukupnu širinu od 200px, uključujući padding i border. Da je content-box, ukupna širina bi bila 200 + 210 + 25 = 230px.

Korišćenje border-box često pojednostavljuje raspored, jer dimenzije elemenata ne "idu u rasulo" zbog paddinga i bordera.