margin合并

margin合并是什么？

我们来简单看一下MDN对margin合并的解释：

块的顶部外边距和底部外边距有时被组合（折叠）为单个外边距，其大小是组合到其中的最大外边距，这种行为称为外边距塌陷（也叫外边距合并）。

发生外边距塌陷的三种情况：

相邻的兄弟姐妹元素（除非后者兄弟姐妹需要清除过去的浮动）
块级父元素与其第一个/最后一个子元素
空块元素

下面，我们通过几个实例对这三种情况进行解释。

本文结构：

相邻的兄弟姐妹元素
块级父元素与其第一个/最后一个子元素
空块元素
总结

一、相邻的兄弟姐妹元素

我们来看MDN：毗邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要清除过去的浮动）。
这句话有两个要点：
1、一般情况：毗邻的两个兄弟元素之间的外边距会塌陷；
2、特殊情况：当后面div需要清除过去的浮动时，毗邻的两个兄弟元素之间的外边距不会塌陷。
我们对这两个要点分别进行研究。

1、一般情况

这种情况比较简单，我们直接来看例子：

// html
<body>
  <div class='bro1'></div>
  <div class='bro2'> </div>
</body>

// css
body{
  margin:0;
  padding:0;
}
.bro1{
  width:300px;
  height:200px;
  background:#ddd;
  margin-bottom:30px;
}
.bro2{
  width:200px;
  height:100px;
  background:pink;
}

结果：

上面的例子中，我们给灰色的div设置了30px的下外边距，这时的显示都是符合预期的。现在我们给粉色的div添加一个margin-top:20px：

// css
.bro2{
   margin-top:20px;
}

结果：

按照我们的预期，应该是灰色div的margin-bottom与粉色div的margin-top叠加，最终使得两个div的间隔为50px。但是我们看到，结果并没有改变。
现在我们改变粉色div的margin-top为60px：

// css
.bro2{
   margin-top:60px;
}

结果：

按照我们的预期，应该是灰色div的margin-bottom与粉色div的margin-top叠加，最终使得两个div的间隔为90px。但是我们看到，两个div的间隔为粉色div设置的margin-top。

这种现象就是外边距合并的典型情况。相邻的两个兄弟元素之间的外边距会取两者之前的最大值进行合并。灰色div的下边距为30px，当粉色div的上边距为20px时，取两者中的较大值30px，所以两个div的间隔为30px；当粉色div的上边距为60px时，取两者中的较大值60px，所以两个div的间隔为60px。

2、特殊情况

我们来看一个例子：

// html
<body>
  <div class='bro1'></div>
  <div class='bro2'></div>
</body>

// css
body{
  padding-top:1px;  //若不设置，body和灰色div会存在父子元素之间的margin合并
}
.bro1{
  width:300px;
  height:200px;
  background:#ddd;
  margin-bottom:30px;
  float:left;
}
.bro2{
  width:200px;
  height:100px;
  background:pink;
  margin-top:50px;
  clear:both;
}

结果：

我们给第一个灰色div设置了浮动，又在粉色div中清除了浮动。灰色div有一个30px的下边距，粉色div有一个50px的上边距，结果两个div间的间距为30px。

在上面的例子中，粉色div的margin-top是相对于顶部而非灰色的div，因为灰色的div设置了浮动，已经脱离了文档流，所以粉色div实际上是看不到这个灰色div的。但是这个粉色div又必须在灰色div的下面，所以粉色div距离顶部的距离为200px+30px=230px。上面的例子中，两个div的距离为30px，是因为粉色div的margin-top设置得太小，粉色div没办法到距离顶部为50px的地方去。
现在我们增大粉色div的margin-top：

.bro2{
  margin-top:250px;
}

结果：

总结：毗邻的两个兄弟元素之间的外边距会塌陷（除非后者兄弟姐妹需要清除过去的浮动）。

二、块级父元素与其第一个/最后一个子元素

我们来看MDN：

上边距合并：如果块级父元素与第一个子元素之间不存在上边框、上内补、inline content、清除浮动这四条属性之一（对于上边框和上内补，也可以说，当上边距及上内补宽度为0时），那么这个块级元素和其第一个子元素的上边距就可以说“挨到了一起”。此时这个块级父元素和其第一个子元素就会发生上外边距合并的现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者，而父元素与该子元素之间边距消失。
下边距合并：类似的，若块级元素的margin-bottom与它的最后一个子元素的margin-bottom之间没有border、padding、inline content、height、min-height、max-height分隔时，就会发生下边距合并的现象。

我们先看一个例子：

// html
<body>
  <div class='parent'>
    <div class='child1'></div>
    <div class='child2'></div>
  </div>  
</body>

// css
.parent{
  width:400px;
  height:300px;
  background:#ddd;
}
.child1{
  width:300px;
  height:100px;
  background:pink;
}
.child2{
  width:200px;
  height:100px;
  background:gray;
}

结果：

现在我们想让粉色div和父div之前有40px的空隙，所以给粉色div设置"margin-top:40px"：

.child1{
  margin-top:40px;
}

预期结果：

实际结果：

这就是父子元素之间的margin合并。由于粉色div与父div之间没有上边框、上内补、inline content、清除浮动这四条属性之一，使得两个div之间产生了margin合并的现象。

同样地，父元素与最后一个子元素之间也可能发生margin合并的情况，情况大致相同，不再举例说明。

三、空块元素

我们来看MDN：如果存在一个空的块级元素，其border、padding、inline content、height、min-height都不存在，那么此时它的上下边距中间将没有任何阻隔，此时它的上下外边距将会合并。
这个很简单，我们直接看例子：

// html
<body>
  <div class='bro1'></div>
  <div class='special'></div>
  <div class='bro2'></div>
</body>

// css
.bro1{
  width:300px;
  height:200px;
  background:#ddd;
}
.bro2{
  width:200px;
  height:100px;
  background:pink;
}
.special{
  margin-top:20px;
  margin-bottom:30px;
}

结果：

为了更好地对比，我们给.psecial加一点高度：

.special{
  height:10px;
}

结果：

给.psecial加宽度之后，.special就不是空元素，所以它不会发生margin合并的现象，所以灰色和粉色div的间隔为20px+10px+30px=60px。

四、总结

发生外边距合并的元素：块元素之间（父子、兄弟、空块）；发生外边距合并的边距：上、下边距（左右边距不会合并）；
相邻的兄弟元素之间必出现margin合并（除非后者兄弟姐妹需要清除过去的浮动）；
父元素与第一个子元素间，如果没有padding、border、inline content、清除浮动这四个属性之一，就会出现上边距合并；
父元素与最后一个子元素之间，如果没有padding、border、inline content、height、min-height、max-height这几个属性之一，就会出现下边距合并；
空的块级元素，如果其border、padding、inline content、height、min-height都不存在，那么它的上下外边距将会合并。

由于个人水平有限，博客错误之处，烦请指正！