CSS -- 外边距合并篇

一、什么是外边距合并

处于同个BFC中的常规文档流（浮动和绝对定位不算）的块级元素，若之间没有空隙或padding、border隔开，他们将发生垂直方向上的外边距（margin）合并。

而且发生外边距最主要原因是两个元素的margin碰到了一起（有些博客称为相邻或邻接），一般有以下几种情况：

1. 父子关系的合并
   正常文本流中的父元素和子元素，若父元素没有padding和border隔开（子元素无所谓，子元素就算设置了padding/border父元素没设置，margin还是碰到一起），他们的外边距将发生合并。

父子外边距合并

2. 兄弟关系的合并
   同个BFC中，两个正常流的兄弟元素会发生外边距合并。

兄弟外边距合并

3. 元素自身的合并
   当元素自身没有内容，且没有设置border和padding时，他的上下外边距就会碰到一起，从而发生合并。

自身外部距合并

二、外边距合并规则

1. 两个外边距都是正或负数时，折叠结果是两者绝对值之间较大的值，符号不变。
2. 两个外边距一正一负时，折叠结果是两者的相加的和。

三、如何阻止外边距合并

文章开头我们就讲了发生外边距合并的条件:

处于同个BFC中的常规文档流（浮动和绝对定位不算）的块级元素，若之间没有空隙或padding、border隔开，他们将发生垂直方向上的外边距（margin）合并。

所以要想解决外边距合并问题，我们可以让上面加粗的四个点随意一个不满足即可，所以有以下四种解决方案（此处以解决父子关系边距合并为例）：

1. 让两者处于不同BFC下：此处让父元素变成BFC，原先父子同处于根元素这个BFC下，所以才能发生合并，当父元素触发了BFC后，则子元素在新的BFC下，父元素仍然在根元素的BFC下，所以不在同个BFC中，也就无所谓合并了。

父元素变成BFC解决边距合并

2. 让两者其中之一脱离常规文档流，可以设置浮动或者绝对定位

脱离文档流解决边距合并

3. 让两者（此处是父元素或子元素）其中之一变成非块级元素：因为发生margin合并的条件之一是必须是块元素，所以当两者随意一个变成inline-block之后就没法合并了（对inline元素设置margin-top和margin-bottom本身就不生效，也就没有垂直方向上合并这么一说了）。

变成非块级解决margin合并

4. 给父元素设置padding或者border分开他们的margin：

padding、border解决边距合并

同理，解决元素自身的边距合并也可以用上面的四种方法（实际2.3也会触发1）:

1. 让自身触发BFC。
2. 让自身脱离文本流。
3. 变成inline-block。
4. 给自身设置border或padding。

对于兄弟外边距合并，一般用以下三种：

1. 让两者不在同个BFC下。
2. 让自身脱离文本流。
3. 变成inline-block。

之所以少了一种，是因为即使设置了padding或border他们的margin还是会碰在一起。所以又回到开头那句（手动滑稽脸～）：

发生外边距最主要原因是两个元素的margin碰到了一起。