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.
The Border-Defying Body
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 Padding Collapses
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):
BODY { margin: 1em; padding: 1em; } DIV { padding: 1em; margin: 1em; border: 1em solid green; background: cyan; } P { padding: 1em; margin: 1em; border: 1em solid blue; background: magenta; }
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.
BODY { margin: 3mm; padding: 3mm; } DIV { padding: 3mm; margin: 3mm; border: 3mm solid green; background: cyan; } P { padding: 3mm; margin: 3mm; border: 3mm solid blue; background: magenta; }
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.
