I’ve always preferred the “IE Box model.” I’ve always wanted width to actually be the width of the element. Instead, I’ve been forced, for years, to break out my math skills to calculate “actual” value of the width property by subtracting padding, margin and borders. That still seems broken to me after all these years.

I’m not alone in this. Here are some big shots sharing their thoughts on the matter:

Doug Bowman

What drives you crazy when using CSS?
The Box Model, with regards to width and height. If I want a box to be x-wide by y-high, that’s what I want the final box to be. None of this subtractive nonsense needed to calculate something called “content width/height”. It’s dumbfounding that padding and border aren’t included in width and height measurements, or that I’m at least not given the option to force them to be included. An obvious sign that the CSS specification was written by technical people who understood modular construction differently than any designer ever would.

It’s like a furniture salesman providing you the length and height of a couch you like; you confirm the couch will fit perfectly along one wall in your home. Then when you get the couch home, it’s more than a foot too long and about six inches too tall. When you phone back to the furniture salesman to complain about the incorrect length he provided, he responds by stating that the length didn’t include the armrests and the height didn’t include the metal legs, and aren’t you stupid for not taking those into account in your measurements! What!?

In that regard, and in my opinion, Microsoft’s IE5/Windows team actually did something right when they originally implemented the box model against specification. They implemented it the way they thought the masses would expect the box model to work. Even though I’d like all browsers to build to specification so we all gain consistency and predictability, it’s a shame – in this instance – that Microsoft ended up bending to the specification, instead of rallying other browser makers and pressuring the W3C to change the specification to match logical behavior, and by extension, IE5/Win’s existing implementation.

Source: Douglas Bowman declares his love to CSS …

Peter Paul Koch

At some point you mentioned “I have found some problems in the standards themselves”. Can you clarify this sentence?

My favorite example is W3C’s box model. In this model, the width property defines the width of the content of the box, excluding paddings and borders. In my opinion this model is completely illogical.

Logically, a box is measured from border to border. Take a physical box, any box. Put something in it that is distinctly smaller than the box. Ask anyone to measure the width of the box. He’ll measure the distance between the sides of the box (the ‘borders’). No one will think of measuring the content of the box.

Web designers who create boxes for holding content care about the *visible* width of the box, about the distance from border to border. The borders, and not the content, are the visual cues for the user of the site. Nobody is interested in the width of the content.

I wonder why W3C made its box model so needlessly complicated?

Source: Interview with Peter-Paul Koch

Which is why I’m an unabashed fan of the border-box value of the new box-sizing property. Border-box is defined like this:

The specified width and height (and respective min/max properties) on this element determine the border box of the element. That is, any padding or border specified on the element is laid out and drawn inside this specified width and height. The content width and height are calculated by subtracting the border and padding widths of the respective sides from the specified ‘width’ and ‘height’ properties.

Which is a lot of text to simply say: “This value uses the IE Box Model”

Hallelujah!

I’m going to be using that extensively once it’s fully available. It’ll save time, spare me occasional confusion and will likely open up some options in terms of layout. Bring it on…