For years many of us struggled to describe the nature of the 'Box Model' to people; of how the various elements were calculated in respect of their dimensions; we explained the issue with IE and the - then named - 'Broken box Model' we explained how this box model differed in it's approach to borders, padding and content width, how to deal with two models, hacks & filters galore, if pressed further we might have gone as far as to try and point out that the W3C gave a reasoning of why the box model had to be broken down - in respect of dimensions - into separate parts as the 'content' had to take a dimension and the other aspects had to be added to that width so as to preserve that content dimension.

We watched and wondered as the Specs toyed with proposals over the years for a box-sizing property it was included then discarded as unworkable then brought back until I for one gave up caring whether it ever saw the light of day, after all we had a model that appeared to work.

Now that box-sizing is a reality I wonder why we need it, I wonder why on earth the content-model ever really existed, if as it appears now it is possible to have IE original model, a model that I remember some stating was in fact a perfectly workable one and that after all IE model came before the W3C's version.

Years spent wrestling with two box models and yet it feels now as though in reality it was never IE that caused the issue as we would aggressively point out but in fact the fault of the W3C.

It tends to further my feeling that the W3C doesn't serve us well really.

The Box-sizing description

The Box-sizing description was written up by AndyA as a way for him to get a better understanding of CSS. I think it was a pretty good choice of topic as it helps to highlight how confusing CSS can be. Personally I can't see myself using it any time soon. If it was backward compatible with all previous browser versions then it could be used to clean many hacks.

And a good write up, it

And a good write up, it jogged my memory of the oh so many times over the last few years that this property was part of the specs then removed then debated further for what seemed an eternity. The only real end result of the way things work is to cause confusion for the people that really matter in all this, US! the poor down trodden web developer Smile

Technically speaking one could say IE had it right in their implementation and it was the W3C that made a hash of things Stare

border-box model

I can see the advantages of the border-box sizing for tables, but no compelling need. Tables do have special characteristics which may, in some cases, benefit from that model. On the whole, border-box sizing is counter intuitive. You size a box to fit the content, not the other way 'round.

If you think about it, though, in auto width, you're pretty much dealing with a margin-box model. :shrug:



It seems to simply have the

It seems to simply have the effect of adding a further layer of confusion on matters. I guess I ought to see if there is a use case example to show how it's envisaged it helps us.

Tables? surely they have such a complex series of properties and built in mechanisms, they have their own layout models, col elements and width attributes etc.

@Gary I'm not sure I would

@Gary I'm not sure I would agree with the statement - although understand what you mean - "You size a box to fit the content" I think most size a box to fit a layout not the content in that box and in that respect would imagine seeing this border-box being used a hell of a lot by those that haven't huge css skills.

Yeah, but

The design is, or should be, based on the page's content. Text needs to be an optimal width, a picture gallery puts constraints on the box's content size. It all comes down to whether a web designer or a print designer drew up the wire frame.

You're right, though. Most so-called designers start laying out the page before having even a scintilla of clue about the content.



I have to agree with both

I have to agree with both implementations. How can you argue that one is more right than the other? i suppose it will be more helpful for people who grok one method and not the other. They'll pick the one that makes sense to them and in theory will be able to specify measurements without any gotchas thanks to box model differences.

Should theoretically make it faster?

I suppose I should

I suppose I should explain.

Me, I understand if i say a box is 200pixels wide, then anything extra s going to make it bigger. The 'contentarea' of the box is in essence what I'm specifying.

Someone who needs a box to be exactly 500pixels wide (to fit a predesigned layout for example) will specify it and want it to stay that big, so they can concentrate on styling it to make it look pretty, without constantly having to go back and change the width to compensate.

The W3C box model always was

The W3C box model always was a nonsense.
Who cares about the width of the "content"?
Example with predictable behavior using box-sizing :
width: 40%;
border: 1px;
padding: 1em;
==> box-sizing > W3C box model

Quote from Douglas Bowman

Q)What drives you crazy when using CSS?
DB)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!?