thelinuxlink.net

I'm looking for clarification here. I was under the impression that when calculating the width of a block element you add like this:

left margin + width + right margin = total width

I did not think padding was counted in this as it is inside the box. But I guess I am wrong as both Firefox and Safari tack on 5 pixels to the right of an 800 pixel wide block when I add padding-left = 5px.

No IE, on the other hand does not add padding. So it looks as I expect. But if I adjust the width to accomodate the padding to 795 pixel, then IE displays the block at a total of 795 pixels.

So I guess the box model I describe above is for IE? And standards compliant browser cacluate like so:

left margin + left padding + width + right padding + right margin = total width.

(Well, you have to add in borders too.)

It makes sense to me that the padding shouldn't be included in calculating the width of the box, but the W3C says different.

"The box width is given by the sum of the left and right margins, border, and padding, and the content width. The height is given by the sum of the top and bottom margins, border, and padding, and the content height."
http://www.w3.org/TR/REC-CSS2/box.html

The real pain about the IE5/6 box interpretation, the thing that started all the hacks, is that it can go in and out of quirks mode based on which doctype is used. <a href="http://css.maxdesign.com.au/listamatic/ ... tamatic</a> has a nice list at the bottom of the page of which browsers get the box wrong based on which doctype is used. I know we all bitch about Microsoft and IE, but their rendering of the box model seems somewhat more intuitive.