出于什么原因在CSS中引入了保证金折叠规则？

Question

当这套聪明的规则有所帮助时,无法弄清楚情况.它们打破了盒子模型的简单性,并在将不同的布局组合在一起时提供无限的麻烦来源.那是什么原因？

参考规则.

更新:规则对于兄弟元素是非常合乎逻辑的,但为什么边距应该传播到父元素直到树？解决了什么样的问题？

例如:

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

Answer 1

这是在你意识到替代品变得不那么有意义之前它没有真正意义的情况之一.

您可能知道,边距指定元素之间的距离,它不是围绕每个元素的"外部填充".如果两个边距为20px的元素彼此相邻,则它们之间的距离为20px,而不是40px.

由于边距是到另一个元素的距离,因此距离是从元素到周围元素,而不是父元素的边界.

如果边距将计入父元素的边界,则将元素放入元素中div会在元素之间引入额外的间距,尽管它div本身没有边距或填充.如果div在其周围添加无样式,则元素周围的边距应保持不变.