CSS margin collapse

I hate “margin-collapse”. It’s one of those features that made it into the W3C standard but shouldn’t. What does “margin-collapse” actually mean? Here’s an excerpt from one of W3C documents on this issue:

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

The whole document is available here. I don’t know about you, but for me, this mechanism causes a lot more problems than it solves. By the way, does it solve *any* problems? For instance, the is you see this piece of CSS

#line {
    width: 300px;
    height: 10px;
    background-color: grey;
}

#parent {
    width: 300px;
    height: 300px;
    background-color: red;
}

#child {
    width: 100px;
    height: 100px;
    background-color: blue;
    margin-top: 20px;
}

…attached to the following XHTML…

<div id="line">
</div>
<div id="parent">
	<div id="child">
	</div>
</div>

…then you’d expect – more or less – to see something that looks like this:

I know I would. And I felt frustrated when I first saw that, in fact, it looks like this. This bites! The “margin collapse” mechanism is to blame. Because the margins touch each other, they collapse, and the 20 pixels margin applies to the parent (red) div instead of the child. Of course, there is a simple workaround around this, all one has to do to escape from the margin-collapse nightmare is to add a border or a padding somewhere, so that the margins won’t touch any more. Like so.

But until before I’ve figure it out, I thought that there is a God and that He hates my guts…