CSS之margin合并

合并margin

CSS中，两个或多个盒（可能但不一定是兄弟）的相邻的margin会被结合成一个margin。外边距按这种方式结合叫做合并（collapse），产生的结合的外边距叫做折叠外边距

计算规则

当两个或者更多的margin合并时，产生的margin宽度为合并margin宽度中的最大值。至于负margin，就从正相邻margin的最大值中减去负相邻margin的绝对值的最大值。如果没有正margin，就用0减去相邻margin的绝对值的最大值

合并规则

根据 CSS2.1规范，可以知道以下：

相邻的垂直外边距会合并，除了：

根元素盒的margin不合并如果一个带有间隙（指clear属性导致元素位置移动形成的间隙）的元素的上外边距与下外边距相邻，它的外边距会和紧挨着的兄弟（元素）的相邻外边距合并，但合并后不会再和父级块的下外边距合并

水平margin不会合并

两个margin是 相邻的 ，当且仅当：

都属于流内（in-flow）块级盒，处于同一个块格式化上下文没有行框（line box），空隙，内边距和边框把它们隔开（注意，因此某些0高度行框会被忽略）都属于垂直相邻框边界，即形成下列某一对： 盒的上边距与其第一个流内孩子的上边距盒的下边距与其下一个流内紧挨着的兄弟的上边距最后一个流内孩子的下边距与其height计算值为’auto’的父元素的下边距盒的上边距和下边距，要求该盒没有建立新的块格式化上下文，并且’min-height’计算值为0，‘height’计算值为0或’auto’，还没有流内孩子

margin相邻现象举例说明

1.当两个盒子都属于流内（处于普通文档流内）块级盒，处于同一个块格式化上下文（BFC）。

由此可知，

处于不同BFC的两个盒子的margin不相邻（即可知，可以通过将盒子分别分离到不同BFC中去避免其出现margin重叠现象）且BFC元素和它的子元素不会发生margin重叠（因为它们处于不同BFC中）

例1，设置div的样式如下，其中margin为20px，可以从图中看出，由于两个div属于流内，且处于同一个BFC中，通过选中可以看出两个div发生margin重叠，两个div之间的间距为20px。

div { width: 100px; height: 100px; background: red; margin: 20px; } <div></div> <div></div>

当元素脱离文档流时，不会发生margin重叠，如下：

div { width: 100px; height: 100px; background: red; margin: 20px; float: left; } <div></div> <div></div> <div></div> <div></div>

当元素处于不同BFC时，不会发生margin重叠，如下：

.content { width: 100px; height: 100px; background: red; margin: 20px; } .bfc { overflow: hidden; } <div class="bfc"> <div class="content"></div> </div> <!--两个content处于不同BFC中--> <div class="content"></div>

例2.当父、子元素都是流内元素，且属于同意BFC时，出现margin重叠（father到根元素的margin最终为son的30px）

.father { width: 100px; height: 100px; background: red; margin: 20px; } .son { width: 50px; height: 50px; background: yellow; margin: 30px; } <div class="father"> <div class="son"></div> </div>

当设置父元素father设置为脱离文档流时，可以看出，father和son没有出现margin重叠现象

.father { width: 100px; height: 100px; background: red; margin: 20px; float: left; }

由于设置float和定位就等于将father变成了BFC，即就让father和son处于了不同BFC中，结果和上述一样，这里就不在赘述了。

2.没有行框（line box），空隙，内边距和边框把它们隔开

意思就是说，两个margin之间接触，中间没有其他东西，就会出现重叠。

例3，父元素设置border，就可以看到父子元素之间没有出现margin重叠

例4，当一个元素设置了margin，但是该元素高度为0时，也会出现margin重叠，如下

.targ { width: 100px; height: 0; margin: 20px; } .sbling{ width: 50px; height: 50px; background: yellow; } <div class="targ"></div> <div class="sbling"></div>

当设置了padding时，就不会了，如下：

3. 最后一个流内孩子的下边距与其height计算值为’auto’的父元素的下边距，即当父元素的高度为auto时，其marginbottom和其最后一个流内子元素的marginbottom会合并。

例5，father的高度为auto，它和它的最后一个流内孩子son的下边距重叠，最后father和sibling之间的间距为150px，如下

.father { width: 100px; margin-bottom: 100px; } .son { width: 100px; height: 100px; margin-bottom: 150px; background: red; } .sibling { width: 100px; height: 100px; background: yellow; } <div class="father"> <div class="son"></div> </div> <div class="sibling"></div>

当给father设置height之后发现，此时sibling与father的垂直距离，只跟它们的margin值有关，与child的margin值无关，如下： 当给father设置padding、border之后，可以发现father的高度被自动撑开为250px，此时它与sibling之间的距离也只受他们之间margin值的影响，如下：

4.盒的上边距和下边距，要求该盒没有建立新的块格式化上下文，并且’min-height’计算值为0，‘height’计算值为0或’auto’，还没有流内孩子

例6，content没有建立新的BFC，且高度为0，并且没有流内孩子，其与sibling的间距为100px，即其上下边距发生了合并

.content { width: 100px; height: 0px; margin: 100px; } .sibling { width: 100px; height: 100px; background: yellow; } <div class="content"> </div> <div class="sibling"></div>

当设置content为BFC后（设置padding、border、height同样），间距为200px，如下，

总结

只要两个margin之间被“隔开”了，包括被分离到不同BFC和被border、padding、高度、空隙或者其他内容隔开，就不会发生margin合并

以下摘自 CSS2.1规范

浮动的盒与任何其它盒之间的margin不会合并（甚至一个浮动盒与它的流内子级之间也不会）建立了新的块格式化上下文的元素（例如，浮动盒与’overflow’不为’visible’的元素）的margin不会与它们的流内孩子合并绝对定位的盒的margin不会合并（甚至与它们的流内子级也不会）inline-block盒的margin不会合并（甚至与它们的流内子级也不会）流内块级元素的bottom margin总会与它的下一个流内块级兄弟的top margin合并，除非该兄弟（元素）具有间隙流内块级元素的top margin会与它的第一个流内块级子级的top margin合并，条件是该元素没有上边框和上内边距，并且其孩子不具有间隙一个’height’为’auto’并且’min-height’为0的流内块级盒的bottom margin会与它的最后- - 一个流内块级子级的bottom margin合并，条件是该盒没有下内边距和下边框，并且其孩子的下外边距没有与具有间隙的上外边距合并盒自身的外边距也会合并，条件是’min-height’属性为0，既没有上下边框，也没有上下内边距，‘height’为0或’auto’，且不含行框的话，那么其所有流内孩子的外边距（如果存在的话）都会合并