UX Design and Development course

The Box model


Elements that have a set width become wider when they have padding and/or border-width. IE6 choose to ignore this specification and in it's implementation of the Box Model, if you set a width and add padding and border-width, the width of the box would not add these values. This was called the box model bug.

With IE7, Microsoft updated this feature so that it was compliant with the spec and other browsers. At the same time other browsers adopted the box-sizing feature which mimicked the the box model bug, but alas IE7 did not implement that feature.

Read * { Box-sizing: Border-box } FTW for more info.


As usual, Chris has more then enough to say about this subject. If you are interested in a deeper dive, check this out.