По какой причине в CSS введены правила коллапса маржи?

Просто не могу понять ситуацию, когда этот умный набор правил может быть полезен. Они нарушают простоту блочной модели и обеспечивают бесконечный источник проблем, когда вы комбинируете различные части макета вместе. Так в чем же причина?

правила для справки.

Обновление: правила вполне логичны для родственных элементов, но почему поля должны распространяться на родительские элементы вплоть до дерева? Какие проблемы это решает?

Например:

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

Div верхнего уровня отстоят друг от друга на 100px.

Ответы на вопрос(3)

Ваш ответ на вопрос