The “box-model” in CSS is often a point of confusion for people starting to get to grips with CSS and even with people coming from other coding backgrounds.
One of the more annoying things you can come across when dealing with this is with form elements, and how elements like <select> and <input type=”text” /> appeared different lengths when compared side by side in various browsers (when set to width:100%).
This is down to the box-model.
The box model works like this
width + padding + border = actual visible/rendered width of box
height + padding + border = actual visible/rendered height of box
It’s a little odd at first, but you get used to it.
In IE 6 and earlier, when in “quirks mode,” the box model was treated differently…
width = actual visible/rendered width of box
height = actual visible/rendered height of box
The border and padding values moved inward, cutting into the width/height of the box rather than expanding it.
How to change the box model
We can overwrite the default box-model on elements with the CSS3 property “box-sizing” using the code below.
/* Replace selector with the targeted elem, class or id */ selector { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ }
This can help to normalize the elements on your page when it comes to working out the box-model, and according to Paul Irish the overheads are insignificant.
Support
Chrome (any): box-sizingOpera 8.5+: box-sizing
Firefox (any): -moz-box-sizing
Safari 3: -webkit-box-sizing (unprefixed in 5.1+ versions)
IE8+: box-sizing
Links
http://css-tricks.com/box-sizing/
http://www.paulirish.com/2012/box-sizing-border-box-ftw/