CSS značka »box-sizing« nadzoruje, kako se polja privzetega CSS modela obnašajo na strani glede na postavitev. Povedano drugače, vpliva na širino in višino elementov in kako se slednji prikazujejo na sami strani.
Učinek si najlažje predstavljamo na primeru. Če imamo width: 80px; padding: 20px; border: 5px solid black;. V tem primeru bi bilo polje širine 130px (width+padding+border). Razlog tiči v tem, da se uporablja “content-box”. Skozi značko »box-sizing«, lahko slednjega spremenimo na “padding-box”. V tem primeru bi bila širina polja 90px (width+ border). K celotni dolžini bi se upoštevala le širina in rob. V primeru uporabe “border-box” pa bi bila širina polja 80px (width). Tu se upošteva le širina elementa.
Na opisanem primeru smo ugotovili, da je najboljša metoda »border-box«. V tem primeru nam namreč ni potrebno skrbeti, kaj se bo dogajalo z elementi in njihovimi postavitvami na strani, ko bomo dodajali odmike (padding) in obrobe (border).
»border-box« metoda je še posebej uporabna pri odzivnem spletnem designu (RWD), saj nam ni potrebno računati odmike in robove v % ali em enotah.
Slabost CSS značke »box-sizing« je ta, da ni najbolje podprta. V Internet Explorerju je podprta od 8 verzije naprej, za Firefox, Safari in Chrome pa potrebujemo dodatne značke.
CSS koda:
* {
-webkit-box-sizing: border-box; /* Safari/Chrome, WebKit */
-moz-box-sizing: border-box; /* Firefox */
box-sizing: border-box; /* IE 8+ */
}
Zanimiva članka na temo box-sizing:
