Simplemente no puedo entender la situación cuando este conjunto inteligente de reglas puede ser útil. Rompen la simplicidad del modelo de caja y proporcionan una fuente infinita de problemas cuando se combinan diferentes piezas de diseño. Entonces, ¿cuál es la razón?

Reglas para la referencia.

Actualización: las reglas son bastante lógicas para los elementos hermanos, pero ¿por qué los márgenes deberían propagarse a los elementos principales hasta el árbol? ¿Qué tipo de problemas que soluciona?

Por ejemplo:

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

Los divs de nivel superior están separados unos de otros por 100px.