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-sizing
Opera 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/