CSS 折叠边距：它们的目的是什么？

Question

CSS2 盒子模型告诉我们相邻的垂直边距会折叠。

我觉得这很烦人，因为它是许多设计错误的根源。我希望通过了解折叠边距的目的，我将了解何时使用它们以及如何在不需要时避免它们。

此功能的目的是什么？

Answer 1

“margin”的一般含义不是传达“将其移动 10px”，而是“该元素旁边必须有 10px 的空白空间。”

我一直发现这是最容易用段落来概念化的。

如果您只为段落指定 margin-top: 10px 并且在任何其他元素上没有边距，则一系列段落的间距将会很漂亮。但是，当然，当您将另一个元素放置在段落下方时，您会遇到麻烦。两人会碰触。

如果边距没有折叠，您会犹豫是否将 margin-bottom: 10px 添加到之前的代码中，因为这样任何一对段落都会间隔 20px，而段落将与其他元素仅 10px。

所以垂直边距会塌陷。通过添加 10 像素的顶部和底部边距，您会说：“我不关心其他元素的边距规则。我要求每个段落的上方和下方至少有 10 像素的内边距。”