84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
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 像素的内边距。”