Exploring the Box Ocean in Explorer Continued - 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 Continued

With no padding the code looks like this:

BODY {
  margin: 5mm;
}
DIV {
  margin: 5mm;
  border: 5mm solid green;
  background: cyan;
}
P {
  margin: 5mm;
  border: 5mm solid blue;
  background: magenta;
}

The words "beta testing" come to mind, as in the sentence "hasn't Microsoft heard of beta testing their browser's layout capabilities before they release it?" The above example can hardly be said to be a complicated one, but you and I both know it's not supposed to look like that. Space above the DIV is still less than it should be. There's no vertical margin above the first paragraph. There's some bottom padding on the second one (don't know where that came from) and... a negative bottom margin? Let's try increasing vertical margins and see what increases.

BODY {
  margin: 5mm;
}
DIV {
  margin: 5mm;
  border: 5mm solid green;
  background: cyan;
}
P {
  margin: 10mm 5mm;
  border: 5mm solid blue;
  background: magenta;
}

Well, it got the DIV top margin right this time. But that's probably because it's displaying the first paragraph's top margin outside the DIV. The inter-paragraph spacing is still correct, thank God, but that's about all that's changed. Let's see, what else can we try? I know, let's get rid of the borders too.

BODY { margin: 5mm; }
DIV {
  margin: 5mm;
  background: cyan;
}
P {
  margin: 10mm 5mm;
  background: magenta;
}

Well, the mysterious padding is gone. The rest remains more or less the same. Thumbs up to Microsoft for correctly implementing collapsing margins between sibling elements. Thumbs down for everything else concerning horizontal spacing.

This bug, which I have christened the "collapsing padding" bug, can be described as follows (stop me when this begins to sound too technical): Explorer will handle vertical spacing between elements with the same parent correctly. When you try to mess with the spacing between elements and their parents, however, don't expect anything to work.

The way around this bug is to try anything you can think of until you get it to work. Once again, if anyone has any more solid suggestions to make, feel free to let me know.

Produced by Stephanos Piperoglou

All Rights Reserved. Legal Notices.

URL: https://www.webreference.com/html/tutorial10/
Created: Dec 2, 1998
Revised: Jan 27, 1999