Forum Moderators: not2easy
I've been thinking about this issue of the misinterpreted box model. You know, MSIE thinks the padding is inside the measured box, while the CSS standard says that only the active content area, excluding padding, border and margin is to be as wide as the measurement provided.
Intuitively, just to step to the left and look at it from an independant view point, how should it be done?
Kinda strikes me that the 'border' is a functional structure. It has an intention - it is the boundary of inside and outside the box. Isn't that where you should measure to?
And "padding" is maybe two differing things: from some angles, padding is a layer of "stuff" which makes the border of something "softer" (as in less obvious, less "hard") when you're looking at it from the "inside" (you know, like bubble-pak in a box so the USPS doesn't trash granma's antique pitcher....); from another angle, padding is something which smoothes the outer edges of a hard item so that the edges seem more organic, as if you might bounce off of them rather than break your nose (like stucco over lathing to round off the corners).
What does this mean to me empirically? Mostly that I personally expect "padding" to be "inside the box". So for me, IE in this single instance is the "not-broken" browser. Of course, I don't use IE - except for testing. I use Firefox. And w3 org's standards say that IE is wrong. I can deal with that.... but my intrinsic logic (yah, yah, I know you guys don't think I HAVE any logic!) insists that in this case, IE is RIGHT....
Now how zen is that - philosophising on the broken box model?
Someone (I can't remember who right now...) wrote a very informative post about how the box model follows the long-established paradigms for laying out space in print design.
The idea is that the basic box is the amount of room you have just for the content, and padding, borders and margins get added in last. If you think about setting type where you have a fixed amount of content and a fixed amount of space (since you can't scroll on paper...), this kind of makes sense. The text must get onto the page, and the options for padding, border and margin can be determined by how much space is left after the size of the text block is established.
[The border] has an intention - it is the boundary of inside and outside the box. Isn't that where you should measure to?
This, on the other hand is clearer; you would be right if the border had zero thickness, but if you have to account for the width of it in laying out a (web/paper) page, it doesn't make sense to consider it as simply a boundary.
This is kind of the same problem you have when you try to measure something with a cheap ruler...which side of the mark do you measure from?
-B
However, they still could not decide whether the frame was inside or outside the box and I seem to remember that in Quark at least, there was an option for the frame to be shown on the inside or the outside of the box. So bedlam makes a very good point about borders not having zero thickness, so should they be inside or outside philospohically?
However, the Quark way was fine when everything was fixed sizes. Web content, however, is dynamic and part of the point of CSS is to allow fluid design focussed around the content - the layout follows the content and not vice versa. As a result, I believe that the CSS model of having the width relating to the content and the layout items of padding, border and margin all being outside that is the better way to go.
I think it is also more practical to have all the itmes either inside or outside and not have to remember which items are inside and which are outside, especially the border, which is not intuitively in or out.
CSS box model wins my vote and the IE 5 box model has now gone from all current browsers. Remember that IE6 uses the correct CSS box model, PROVIDED that you use the correct DOCTYPE header to put it into "standards" mode rather than "quirks" or "compliance" mode.
With such fuzzy ideas of my own, I'm grateful to the W3C for having a standard that's at least easy to remember - just add up all the dimensions and there's your overall "width."
The problem I have is that I can never remember how IE 5.x gets it wrong . . . but then, I always design with enough flexibility that IE can break things a bit and nobody will notice.
It sure is a lot easier to program the old IE box model. In compliant mode, try to make something "100% - 100px" height. You can't, easily. Where in the IE model, height: 100%; margin: 50px; gives you exactly what you need. I ran across this trying to do a 4-sided liquid border recently. Getting it to work in quirks IE was a snap, but to make it compliant and work the way I wanted it to requred jumping through hoops for days. I ended up having to use IE expressions.
If you go to the hardware store and by a cardboard box with dimensions, say, 12" x 4" x 6", the quoted dimensions are for the interior of the box. And to paraphrase a previous post, if I wrap newspaper (padding) around what ever I put in the box, it's inside the measured dimension, while the border (the walls of the box) and margin (spacing between boxes) is exterior.
I think in our html world though, I would make one more change. I would make the border part of the dimension as well. Which, oddly enough, is how the IE box model works. It makes sense to measure that parts you can "see". I can see the border and padding, but I can't see the margin.
So yes, in this case, I believe IE got the box model right and the W3C got it wrong. C'est la vie...
