边距折叠是指当两个垂直边距相遇时，它们形成一个边距。合并边距的高度等于两个合并边距的高度中的较大者。先看W3C对marginmerging的介绍：Marginmerging简单的说，marginmerging就是当两个垂直的margin相遇时，形成一个margin。合并边距的高度等于两个合并边距的高度中的较大者。当一个元素出现在另一个元素之上时，第一个元素的下边距与第二个元素的上边距合并。见下图：当一个元素包含在另一个元素中时（假设没有填充或边框分隔边距），它们的顶部和/或底部边距也会合并。看看下图：边距甚至可以与自身合并，尽管这看起来有点奇怪。假设您有一个带边距的空元素，但没有边框或填充。在这种情况下，顶部和底部边距相遇，并且它们合并：如果这个边距与另一个元素的边距相遇，它也合并：这是一系列段落元素占用空间非常小的原因，因为它们的所有边距都是合并在一起形成一个小边缘。折叠边距乍一看可能有点奇怪，但在实践中，这是有道理的。以包含多个段落的典型文本页为例。第一段上方的空间等于该段的上边距。如果没有边距折叠，所有后续段落之间的边距将是相邻的顶部和底部边距的总和。这意味着段落之间的空间是页面顶部空间的两倍。如果发生边距折叠，段落之间的顶部和底部边距将合并，以便各处的距离保持一致。注意：边距折叠仅发生在正常文档流中块框的垂直边距。行内框、浮动框或绝对定位之间的边距不会合并。在css2.1中，水平边距不会折叠。某些框中的垂直边距可能会折叠：在正常文档流中，两个或多个块级框之间的垂直边距会折叠。最终保证金值的计算方法如下：若均为正值，则取其中最大的一个；如果不是所有正值，取绝对值，然后从正值中减去最大值；如果没有正值，取绝对值，然后用0减去最大值。注意：相邻的框可能是由DOM元素动态生成的，没有邻接或继承关系。如果相邻框之一浮动，则垂直边距不会折叠，即使在浮动框及其子框之间也是如此。设置了overflow属性的元素与其子元素之间的边距不会折叠（除非overflow值可见）。对于具有绝对定位(position:absolute)的盒模型，垂直边距不会折叠，即使在它们的子元素之间也是如此。对于设置了display:inline-block的元素，垂直边距不会折叠，即使在它们的子元素之间也是如此。如果盒子模型的顶部和底部边距相邻，那么它的边距可能会通过它塌陷。在这种情况下，元素的位置取决于其邻居的边距是否折叠。如果一个元素的边距与其父元素的边距顶部一起折叠，则该框的边框顶部被定义为其父元素的相同。另外，任何元素的父元素都不参与margin的折叠，或者只有父元素的margin-bottom参与计算。如果元素的border-top不为零，则元素的border-top边框位置与之前相同。已清除元素的margin-top永远不会与其块级父级的margin-bottom折叠。请注意，已经被折叠覆盖的元素的位置不会影响其他已经折叠的元素的位置；只有在定位这些元素的子元素时才需要border-top位置。根元素上的垂直边距不会折叠。浮动块级元素的底部边距始终与其浮动的下一个流入块级兄弟元素的顶部边距相邻，除非该兄弟元素使用清除。浮动块级元素的margin-top与其第一个浮动的第一个流入块级子元素的margin-top相邻（如果元素没有border-top，没有padding-top，并且子元素没有使用清理）。如果满足以下条件（如果元素未指定padding-bottom或border），则浮动块级元素的margin-bottom与其最后一个浮动块级子元素的margin-bottom相邻：如果元素的min-height属性设置为0，那么它的margin是相邻的，它既没有border-top和border-bottom，也没有padding-top和padding-bottom，它的height属性可以是0或者auto，不能包含一个内联框（linebox），它的所有浮动子元素（如果有的话）的边距都是相邻的。当一个元素有margincollapsed并且它使用clearing时，它的margin-top将与其紧随其后的兄弟元素的相邻margin一起折叠，但结果它的margin将不再与其块级父元素兼容。元素的margin-bottom折叠。折叠操作是根据padding、margin、border的值（即浏览器解析完所有这些值后）进行的，折叠后的margin计算会覆盖已经使用过的不同margin值。
