CSS2 盒子模型告诉我们相邻的垂直边距会折叠。
我觉得这很烦人，因为它是许多设计错误的根源。我希望通过了解折叠边距的目的，我将了解何时使用它们以及如何在不需要时避免它们。
此功能的目的是什么？
“margin”的一般含义不是传达“将其移动 10px”，而是“该元素旁边必须有 10px 的空白空间。”
我一直发现这是最容易用段落来概念化的。
如果您只为段落指定 margin-top: 10px 并且在任何其他元素上没有边距，则一系列段落的间距将会很漂亮。但是，当然，当您将另一个元素放置在段落下方时，您会遇到麻烦。两人会碰触。
margin-top: 10px
如果边距没有折叠，您会犹豫是否将 margin-bottom: 10px 添加到之前的代码中，因为这样任何一对段落都会间隔 20px，而段落将与其他元素仅 10px。
margin-bottom: 10px
所以垂直边距会塌陷。通过添加 10 像素的顶部和底部边距，您会说：“我不关心其他元素的边距规则。我要求每个段落的上方和下方至少有 10 像素的内边距。”
“margin”的一般含义不是传达“将其移动 10px”，而是“该元素旁边必须有 10px 的空白空间。”
我一直发现这是最容易用段落来概念化的。
如果您只为段落指定
margin-top: 10px并且在任何其他元素上没有边距，则一系列段落的间距将会很漂亮。但是，当然，当您将另一个元素放置在段落下方时，您会遇到麻烦。两人会碰触。如果边距没有折叠，您会犹豫是否将
margin-bottom: 10px添加到之前的代码中，因为这样任何一对段落都会间隔 20px，而段落将与其他元素仅 10px。所以垂直边距会塌陷。通过添加 10 像素的顶部和底部边距，您会说：“我不关心其他元素的边距规则。我要求每个段落的上方和下方至少有 10 像素的内边距。”