For what reason margin collapse rules were introduced in CSS?

Question

Just can't figure out the situation when this clever set of rules can be helpful. They break the simplicity of the box model and provide infinite source of troubles when you combine different pieces of layout together. So what is the reason?

Rules for the reference.

Update: Rules are quite logical for sibling elements, but why margins should propagate to parent elements up to the tree? What kind of problems that solves?

For example:

<div style="margin: 20px; background-color: red;">
    <div style="margin: 20px;">
        <p style="margin: 100px;">red</p>
    </div>
</div>
<div style="margin: 20px; background-color: blue;">blue</div>

Top level divs are spaced from each other by 100px.

Answer 1

This is one of the situations where it doesn't really make sense until you realise that the alternatives make less sense.

As you probably know, margins specify the distance between elements, it's not an "outer padding" that surrounds each element. If two elements with the margin 20px are next to each other, the distance between them is 20px, not 40px.

As the margin is a distance to another element, it makes sense that the distance is from the element to the surrounding elements, not to the boundary of the parent element.

If the margin would be counted to the boundary of the parent element, putting elements in a div element would introduce extra spacing between the elements eventhough the div itself has no margin or padding. The margins around an element should remain the same if you add an unstyled div around it.

Answer 2

When it could be helpful?

The simplest example: a list of paragraphs and headings, each with a margin-top and margin-bottom. You want a margin on the top and bottom of the article, and between different elements.

With margin collapsing, you can do without setting special margins on the first or last item (NOT a part of the original CSS spec!) or padding the container.

But I agree, on a whole, it's a pointless feature.

Answer 3

Consider a body of text containing multiple paragraphs. You want each paragraph to be separated by 2em, and you want the first paragraph to be separated from the preceding content by 2em, and the last paragraph to be separated from the following content by 2em.

This is easily accomplished with the following CSS, because the top and bottom margins separating the paragraphs will collapse:

p {
    margin-top: 2em
    margin-bottom: 2em;
}

If margins didn't collapse, this would result in the margins being separated by a space of 4em, not 2em. Without margin collapsing, the only way to achieve the desired effect would be to set up some additional rules for the first and last paragraphs, which would involve giving them a class or id (which would have to be maintained if the text was ever altered), or wrapping them in an otherwise-unnecessary extra element and using :first-child and :last-child, or... well, you get the idea.

I can guarantee that, if margin collapsing didn't occur, SO would have a lot of duplicate questions asking for workarounds to achieve the consistent spacing that the above rule provides :-)