Exploring the Box Ocean in Explorer - Boxing with CSS, Part II: No Margin For Error - HTML with Style

Boxing with CSS, Part II: No Margin For Error

Exploring the Box Ocean in Explorer

Explorer can be considered to have a user agent stylesheet that
sets the BODY margins to 20 pixels on the top and 10 pixels on
the sides. All block-level elements (paragraphs, headings etc.) except
DIVs also get a vertical margin of approximately 1 em. Note,
however, that Explorer is subject to the paragraph / linebreak bug,
which was discussed in Tutorial
4 and so will sometimes set vertical margins to 0 if the
end-tag of an element is omitted.

Internet Explorer generally supports the box model, with one
exception: it does not render borders and margins correctly for the
BODY element. Setting a border on the BODY element draws
the border around the viewport instead of the element. Consider the
following ruleset:

BODY{margin:1em;padding:1em;border:0.5em solid red;}

What you would expect is 1 em of space inside the viewport, then a
red border, then another em of space. In effect what you get is a border
around the viewport and 2 ems of padding. Explorer displays the border
around the viewport and draws the background behind the margin as
well. You can see this effect in the following example:

When it comes to laying out block elements, however, Explorer does
tend to get a couple of things wrong. Although in general it is
well-behaved and will respect margin, padding and border values, and
collapse vertical margins appropriately, it will sometimes collapse
vertical padding as well, or get the order of margin, border
and padding wrong, or invent some extra padding from nowhere. Exactly
when this happens is unclear (making this a genuine bug of the
"incredibly annoying" variety). Factors seemingly affecting this bug
include the actual values of the margin and padding properties, whether
the properties are specified or inherited, and (very importantly) the
units used in specifying these properties. In other words, if you see
that Explorer fails to lay out your block elements correctly by
collapsing margins with padding, try using a different unit. Or
different syntax. Or explicit values when inherited ones should normally
do fine. If anyone knows a more precise description of when this bug is
triggered, please let me know
(and you can make your friends green with envy when you tell them you
contributed to an HTML with Style tutorial).

When this collapsing padding bug is triggered, Explorer will quite
often get the height of the parent element wrong as well, leading to
strange effects. Here is an example of this in action (you'll need
Internet Explorer to see the bug in action):

Notice the DIV top margin; it is 2em high, when it should be
3em (1em for the BODY margin, 1em for the BODY padding,
and 1em for the DIV margin, just like the left and right margins,
which are correctly displayed). Explorer has gobbled up the DIV's
top margin, or most probably collapsed it, which is strange since
there's no element above it to collapse with. Moreover, Explorer has
drawn the first paragraph's top margin inside the border; there
is 2em of space between the text and the border. The margin between the
paragraphs has been correctly collapsed (yes! it got that one right!),
with 1em of space between them. The second paragraph has a similar
problem with the first one, only the bugs now appear on the bottom
edge.

Watch what happens when we switch the units to millimeters. This
stuff has great entertainment value.

In the first paragraph, the top margin is now displayed outside the
border, as it should be, but it is collapsed with the top padding of the
DIV. Otherwise, the same bugs apply. And this just because we
switched from em to mm. Go figure.

We're not done yet with this evening's festivities, ladies and
gentlemen. Now let's try getting rid of the padding on all the
elements and see what Explorer does.