css box model

Firstly, I declare that I hate Internet Explorer a lot for its buggy float, overflow, and especially the margin collapse behaviours. If you get a combination of these, its undebuggable. And I also hate Microsoft’s product lines and business strategies in general. So for all the IE haters reading this, I’m on your side.

But despite hating IE so much, I’m giving credit to IE for one single thing that they did right – the border box model.

The IE says the width of a box is the length from the left side of its border to the right side (known as the border-box model), which is, in my opinion, the correct model. But the W3C says width of a box is the length of its contents and all paddings, borders, margins are added separately (known as the content-box model). This is totally ridiculous for the following reasons:

1) It is counter-intuitive. If you bring a box and ask people to measure its width, I bet you will never find anyone who would measure its contents. And if I tell you to add some PVC paddings so that I can put some fragile electronic equipments in, you would put paddings INSIDE the box, not stick them outside.

2) Cumbersome calculations. Anyone who has done pixel accurate css layout before can tell you know cumbersome it is to calculate all the content, padding, border and margin sizes for each element and their inner and outer elements too. Many a times when we realise a particular block cannot fit in an image we want, so we need to recalculate everything again and again. And not to mention adding 10 extra divs to make the layout design work.

3) It just doesn’t work. If you want a put something inside a block to fill up the full with and have a 20px padding around its contents, you write {width:100%; padding: 20px;} and Darnn! The block that is suppose to be 100% wide of its container block is actually 40px wider than it. Where is the logic here?

I cannot think of any advantage the content-box model has over the border-box model. So I decided to turn to other resources for answer.

I googled different key words such as “advantage of content-box model” and “reason behind css box model”. Pretty much all results argues how difficult it would be to change specification now because all websites out there would break. But nothing about why choose content-box over border-box in the first place. Then I raised the question on the #css irc channel where is normally full of helpful css pros. Some heated discussion went on and ended up with the same response about how this is already the current specification and impractical to change blah blah… Again, no one was able to come up with a single advantage of content-box.

I also read through the css1 drafts and searched though W3C email archives from 1995 where css specifications is discussed in details. The definition of content-box model is indeed very detailed but there is nothing about the decision behind how this model came to be. Of course the email also has discussions about the browser war and backward compatibility etc. And then go on to the new box-sizing property in css3 to support both box models. In fact, this new dual model only proves my point further – If W3C had a genuine reason to choose content-box model over border-box model in the first place, why would they spend so much efforts on those doctypes and quicksmodes, successfully killing border-box model, and then suddenly decided to revive it?

I hope I am not the only one thinking the compatibility with current specification is not the point. Before you can even start following a specification and tell the others that theirs is incorrect, you need to first explain why yours is the correct one. Just saying whoever not complying with your specification must be wrong is so….. dictatorship behaviour.

After looking into it for several hours and not finding a single counter argument, it seems to me that there is actually none. There was no advantage to choose content-box model over border-box model to begin with. It all happened for historical reasons only – when W3C drafted css for the first time, they did not think deep enough about box model. Then during the browser war IE implemented a box model different to their original specification. They didn’t want to admit IE’s border-box model was the better one and go through all the hassle to change their specification. After many years the web and css has grew so much and everyone now notices the stupid box model is coming back to bite our tongue. This is the conclusion I have come up. Please correct me if I am wrong.

P.S. This post is not really about praising IE but criticising W3C for the poor decision of dealing with it.