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.

Brad on May 4, 2009

I was thinking the same thing. I buggered up my school project website and was left wondering what the problem was. It took ages for me to figure out that I’d forgotten to change the width along with the padding of one of my classes.

Luckily most browsers are implementing CSS3 quickly so maybe IE9 will be forced to follow suit from outcry’s of web developers, like IE8 was with CSS2. Once that happens, maybe W3C will change to the IE5 box model, depending on what the majority of websites use, then use the box model in a later X/HTML.

Probably wishful thinking though. Good article

Michel Billard on May 4, 2009

Thanks for your comment. As I said, CSS3 includes a property so that developers can decide which box model to use which will solve everyone’s issue.

The only problem, which is always the same problem with new CSS standards, is that we have to wait until every (or the vast majority) users switch to a browser that respects the standards (and as we’ve seen it with IE6, it can take a while because of various corporate policies across businesses and because plenty of applications were designed specifically for IE6 back then).

fellow redditor on March 9, 2010

Thanks, I was having trouble and this provided the perfect explanation.

Giorgio Zaverio on October 5, 2010

The most important thing in any webpage is the content. This is immutable. So, I think the most important part of a box is the content space, which is the part of the box that have to contain what I want to exhibit through the page.
No matter about border or padding, these are a kind of “decoration” to evidence or to highlight the content.
In this sense, the W3C model appears to be the most adequate, because it respects the size of the box and consider the rest as a pure decoration, which has to be considered into the rest of the page structure.
Instead, the Internet explorer interpretation includes both border and padding as box size. This means we have to re-arrange the box size any time we want to change the “decoration part”.
Anyway, it would be perfect leaving the programmer to decide which scheme to use.
From another point of view, I think that if we have an Institution like W3C that “create” and “establish” standards, I do not understand why browsers’ developers do not recognize and do not respect them. It costs really nothing to create applications based on the universality of the final results.

Michel Billard on October 10, 2010

@Giorgio – You are absolutely right when you say that content is king on a website. However, as CSS defines the look, this is a matter for designers and front-end developers, not content writers.

I think this issue is a perfect case of putting theory before practicality. In theory, W3C’s standard is right, but in practice it’s hardly usable and makes the designer’s job harder than it should.

Fortunately, as I mention in my post though, developers will have the choice between each scheme in future versions of CSS.

I don’t think that following blindly what the authority says is a good way to improve our craft. Consider it of course, but don’t be afraid to question the so called “standards”.

Nirmal on October 15, 2010

The fact that new designers are comfortable with IE’s box model proves its logical correctness.

And for those who are looking to implement the IE’s model in CSS3, consider using the following:

* {
-moz-box-sizing: border-box;
box-sizing: border-box;
-webkit-box-sizing: border-box;

Will on March 7, 2011

“The fact that new designers are comfortable with IE’s box model proves its logical correctness.”

Not really… as this article explains, the IE model is more convenient for designers, but it’s logically less correct.

It’s always silly when people treat code as some kind of religion and aim for logical correctness above practicality.

Ari on July 6, 2011

The best metaphor I’ve heard is that of a real box. When you send a gift to someone, the post office measure the size of the entire box, not the ‘content’ inside. What’s included in that measurement? The content (the gift) + the padding (the packing peanuts) + the border (the cardboard of the box).

It’s insane the way the W3C has it currently. It is completely counter-intuitive.

I’ve heard one of the biggest reasons is to accommodate images. The idea being that you set the image size, and then add padding for text wrap. But that could easily be replace with margin.

The philosophical view that content is king is off-target as well. Design is more than just about how something looks. The structure and hierarchy (and thus the user’s interpretation of ‘content’) of the elements is strongly communicated through styling.

That’s the biggest problem right there. The current box-sizing is all about a very primitive way of laying out a page (wrapping text around a image). But it’s a nightmare if you’re trying to do good design, that takes into account proportion of elements to each other and to the page as a whole.

The simple fact is that every time I tell a colleague (developer or designer) about border-box sizing, he or she immediately considers the intuitive and beautiful method. It is madness to have otherwise and the cause for a lot of bad design and late-night debugging.

Border-box comes in handy for interactions as well: If I add a surrounding border on hover to floated elements, it doesn’t shift any content).

This is one of the few cases that IE had it right.

Michel Billard on July 6, 2011

Thanks @Ari for your comment.

In my opinion, W3C’s decision to make the width apply to the content is based purely on semantics. Fortunately, the new CSS definition provides us with the ability to choose which model we want.

John Kennedy on February 2, 2012

Perhaps the most important aspect (in my opinion) for the IE box model is that setting height and width as a percentage is useful and meaningful. When using percentage dimensions, I do so because I want my content to fit in a dynamic context, with unknown content and unknown screen dimensions. Using the W3C model, this is impossible once a border or padding are introduced.

David John Welsh on April 12, 2012

It’s interesting that even after a decade, the debate still goes on. I think both sides certainly have their merit, and I have spent a lot of time learning how to do things the W3C way, which is why the CSS3 decision is probably the best one. For those of us who have been conforming to the W3C model for years it will actually be kinda hard to go back to the IE one. In a lot of cases it’ll make things so easy it’ll almost feel like cheating :-)

I remember back in the day, before I knew anything about cross-browser compatibility, desiging a site entirely in IE. Then I found and downloaded Firefox, and… whoa. My site wasn’t only bad, it was literally unvieweable. The only problem was the box model, but it ruined absolutely everything. Rarely have I felt so crushingly disappointed. So of course I had to redo the entire site. Ah, the good old days. But the whole time I was doing it, I was mad at the W3C, not IE, because I just couldn’t wrap my head around their model and why it was better.

(I did of course later learn to be mad at IE for… pretty much everything)

It is, as many have said, an issue of the ideal not meshing with reality. There is no rule that says a browser box *must* behave like a real-world box – windows in computing are only vaguely based around the concept of real windows, after all. But this is a case when it obviously *should* behave that way, so much so that you wonder why they didn’t feel they could bend the rules just a tiny bit to accomodate it.