出于什么原因，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彼此间隔100像素。

Answer 1

这是一种情况，在您意识到替代方案的意义不大之前，它才真正有意义。

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

由于边距是到另一个元素的距离，因此有意义的是该距离是从元素到周围元素的距离，而不是到父元素的边界的距离。

如果将边距计入父元素的边界，则div即使元素div本身没有边距或填充，将元素放置在元素中也会在元素之间引入额外的间距。如果在元素周围添加无样式div，则元素周围的边距应保持不变。