Question

When can 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.