По какой причине в 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.