Internet Explorer box model is not a bug
We often blame Microsoft and the team behind Internet Explorer for its lack of support (or misinterpretation) for standard CSS properties.
However, there is at least one property that Microsoft interpreted correctly in my opinion and it's the box model. Here's a picture of the W3C box model compared to IE's box model.
This "misinterpretation" of the box model is considered to be a bug in IE.
What's wrong with W3C?
Imagine you specify the width, padding and border of a particular DIV. You tweak it until it looks good and fits in your layout. Then, you decide to add 1 or 2 pixels of padding.
With the standard box model (W3C): you have to reduce the width by 2 or 4 pixels (double the value because of each side)
With IE's box model: you don't have to do anything, the DIV stays where you positioned it
This will happen if you change the padding or the width of the borders. It's entirely counter-intuitive. Table cells are implemented like IE's box model, so you would expect that every other box element would behave similarly, but W3C decided otherwise.
Why did W3C go with this model then?
If it's so bad then why did someone think it was a good idea? In the specifications, it is specified that the width and height of block-level elements (like a DIV) should be applied to the content, not the container.
According to the CSS1 specification, released by the World Wide Web Consortium (W3C) in 1996 and revised in 1999, when a width or height is explicitly specified for any block-level element, it should determine only the width or height of the visible element, with the padding, borders, and margins applied afterward.
It may look alright in text, but practically it just doesn't work.
How can we use IE's model?
Fortunately, a lot of people prefer IE's box model. Enough that W3C will include a new property in the next version of the CSS standards (CSS3). The property will be called box-sizing and will allow developers to switch between using a content-box (W3C) or a border-box (IE).
However, until all browsers support this property, we're stuck with using the flawed W3C box model.
