CSS2框模型告诉我们adjoining vertical margins collapse。
我发现它很烦人，是许多设计错误的根源。我希望通过了解折叠边距的目的，我将了解何时使用它们以及如何在不需要它们时避免使用它们。
此功能的目的是什么？
答案 0 :(得分：87)
“margin”的一般含义不是传达“将此移动10px”而是“在此元素旁边必须有10px的空白空间。”
我一直觉得这最容易用段落概念化。
如果您刚刚给出段落margin-top: 10px并且没有任何其他元素的边距，那么一系列段落将会间隔得很漂亮。但是当然，在段落下放置另一个元素时会遇到麻烦。两个人会碰触。
如果边距没有崩溃，您会毫不犹豫地将margin-bottom: 10px添加到之前的代码中，因为任何一对段落都会间隔20px，而段落将与其他元素分开仅10px。 / p>
因此纵向利润率下降。通过添加10px的顶部和底部边距，您会说，“我不关心任何其他元素的边际规则。我要求在每个段落的上方和下方至少有10px的填充。”