为什么 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。
When can this clever set of rules can be helpful? They break the simplicity of the box model and provide infinite source of troubles when you combine different pieces of layout together. So what is the reason?
Rules for the reference.
Update: Rules are quite logical for sibling elements, but why margins should propagate to parent elements up to the tree? What kind of problems that solves?
For example:
<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>
Top level divs are spaced from each other by 100px.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
这是一种没有真正意义的情况，除非你意识到其他选择的意义不大。
您可能知道，边距指定元素之间的距离，它不是围绕每个元素的“外部填充”。如果两个边距为 20px 的元素彼此相邻，则它们之间的距离为 20px，而不是 40px。
由于边距是到另一个元素的距离，因此该距离是从元素到周围元素的距离，而不是到父元素边界的距离。
如果边距计入父元素的边界，则将元素放入
div元素中会在元素之间引入额外的间距，即使div本身没有边距或填充。如果您在元素周围添加无样式的div，则元素周围的边距应保持不变。This is one of the situations where it doesn't really make sense until you realise that the alternatives make less sense.
As you probably know, margins specify the distance between elements, it's not an "outer padding" that surrounds each element. If two elements with the margin 20px are next to each other, the distance between them is 20px, not 40px.
As the margin is a distance to another element, it makes sense that the distance is from the element to the surrounding elements, not to the boundary of the parent element.
If the margin would be counted to the boundary of the parent element, putting elements in a
divelement would introduce extra spacing between the elements eventhough thedivitself has no margin or padding. The margins around an element should remain the same if you add an unstyleddivaround it.什么时候可以有帮助？
最简单的示例：段落和标题列表，每个段落和标题都有一个
margin-top和margin-bottom。您需要在文章的顶部和底部以及不同元素之间留出边距。通过边距折叠，您无需在第一个或最后一个项目上设置特殊边距（不是原始 CSS 规范的一部分！）或填充容器。
但我同意，总的来说，这是一个毫无意义的功能。
When it could be helpful?
The simplest example: a list of paragraphs and headings, each with a
margin-topandmargin-bottom. You want a margin on the top and bottom of the article, and between different elements.With margin collapsing, you can do without setting special margins on the first or last item (NOT a part of the original CSS spec!) or padding the container.
But I agree, on a whole, it's a pointless feature.
考虑包含多个段落的文本正文。您希望每个段落间隔 2em，并且您希望第一段与前面的内容间隔 2em，最后一段与后面的内容间隔 2em。
使用以下 CSS 可以轻松实现这一点，因为分隔段落的顶部和底部边距将折叠：
如果边距没有折叠，这将导致边距被 4em 的空间分隔，而不是 2em。如果没有边距折叠，达到预期效果的唯一方法是为第一段和最后一段设置一些附加规则，其中涉及为它们提供一个类或 ID（如果文本发生更改，则必须维护它们） ，或者将它们包装在一个不必要的额外元素中并使用 :first-child 和 :last-child ，或者......好吧，你明白了。
我可以保证，如果没有发生边距折叠，那么将会有很多重复的问题，要求解决方法以实现上述规则提供的一致间距:-)
Consider a body of text containing multiple paragraphs. You want each paragraph to be separated by 2em, and you want the first paragraph to be separated from the preceding content by 2em, and the last paragraph to be separated from the following content by 2em.
This is easily accomplished with the following CSS, because the top and bottom margins separating the paragraphs will collapse:
If margins didn't collapse, this would result in the margins being separated by a space of 4em, not 2em. Without margin collapsing, the only way to achieve the desired effect would be to set up some additional rules for the first and last paragraphs, which would involve giving them a class or id (which would have to be maintained if the text was ever altered), or wrapping them in an otherwise-unnecessary extra element and using :first-child and :last-child, or... well, you get the idea.
I can guarantee that, if margin collapsing didn't occur, SO would have a lot of duplicate questions asking for workarounds to achieve the consistent spacing that the above rule provides :-)