Ich kann nur nicht herausfinden, in welcher Situation dieses clevere Regelwerk hilfreich sein kann. Sie unterbrechen die Einfachheit des Box-Modells und bieten eine unendliche Problemquelle, wenn Sie verschiedene Layout-Teile miteinander kombinieren. Was ist der Grund?

Regeln als referenz.

Update: Regeln sind für gleichgeordnete Elemente ziemlich logisch, aber warum sollten Ränder auf übergeordnete Elemente bis zum Baum übertragen werden? Welche Art von Problemen löst das?

Zum Beispiel:

<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>

Divs der obersten Ebene sind um 100px voneinander beabstandet.