CSS折叠边距是多少？

Question

CSS2盒子模型告诉我们adjoining vertical margins collapse。

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

此功能的用途是什么？

Answer 1

“边距”的一般含义并不是表达“将此移动10px”，而是“这个元素旁边必须有10px的空白空间”。

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

如果您只是给出了段落margin-top: 10px并且没有任何其他元素的边距，则一系列段落的间距会很精美。但是当然，在段落下放置另一个元素时会遇到麻烦。这两人会碰。

如果利润率并没有崩溃，你会毫不犹豫地添加margin-bottom: 10px到以前的代码，因为那么任何对段落会得到相隔20像素，而段落会从其他元素只10px的分离。

所以垂直边缘崩溃。通过添加10px的顶部和底部边距，您会说：“我不在乎任何其他元素具有哪些边距规则，我需要在每个段落上下填充至少10px的填充。”