css - 为什么要在 CSS 中引入 margin collapse 规则？

Question

这套聪明的规则什么时候能派上用场？当您将不同的布局组合在一起时，它们打破了盒子模型的简单性并提供了无限的麻烦来源。那么是什么原因呢？

Rules供引用。

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

例如:

<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，元素周围的边距应保持不变。