CSS保证金崩溃

Question

因此，当您没有为给定的div元素设置任何保证金或填充或边框时，就会发生保证金折叠？

Answer 1

号当有两个相邻的垂直边缘，这两个中的较大者的使用量和其它将被忽略。因此，例如，如果您有两个块显示元素，A，后面跟着B，A的底边距为3em，而B的顶边距为2em，那么之间的距离他们将3em。

如果您设置边框或填充，这可以防止发生折叠。在上面的例子中，两个元素之间的距离将是5em。

如果您未设置任何边距，则不会有任何边距折叠。它与使用的元素类型没有任何关系 - 它适用于所有元素类型，而不仅仅是<div>元素。

阅读the CSS 2.1 specification了解更多详情。

Answer 2

“表达式折叠边界意味着两个或多个盒子（可能彼此相邻或嵌套）的相邻边界（没有非空内容，填充或边框区域或清除它们分开它们）组合形成单一保证金“。

来源：Box Model - 8.3.1 Collapsing margins