CSS 3 – Box-sizing

Bredd och padding har varit lite ologiskt och ibland en huvudvärk för oss utvecklare. De moderna webbläsarna har lagt på padding utanför element. Bestämmer man att ett blockelement ska vara 400px och anger sedan pudding 20px. Den totala bredden på elementet blir då 440px.

I Internet Explorer 6 var det “korrekt”, angav man att elementet skulle vara 400px och sedan padding 20px då blev paddingen i elementet, den totala bredden var fortfarande 400px.

Nu verkar det som det gamla “Box Model” är tillbaka. Det var bara ett tag sedan jag stötte på taggen box-sizing-taggen i CSS. Det är fler och fler som rekommenderar att man använder box-sizing: border-box.

Det är enkelt att tillämpa på alla element.

/* Add border-box to all elements*/
* { 
-moz-box-sizing: border-box; 
-webkit-box-sizing: border-box; 
box-sizing: border-box; 
}

De flesta webbläsare stödjer border-box.
Chrome: box-sizing
Opera 8.5+: box-sizing
Firefox (any): -moz-box-sizing
Safari 3: -webkit-box-sizing
IE8+: box-sizing

Jag använde mig själv av box-sizing i mitt senaste projekt och kommer fortsätta göra det.

Din kommentar eller åsikt