垂直外边距分析及解决方案

垂直外边距的问题，想来大家都在开发过程中遇到过，那么今天就来集中解析一下。

外边距合并（叠加）是一个相当简单的概念。但是，在实践中对网页进行布局时，它会造成许多混淆。
简单地说，外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。请看下图引用自w3c：

这是一个基本的垂直外边距合并的一个概念。

那么在开发过程中遇到最多的一个问题是什么呢？

就是两个垂直方向上的元素无论是否存在外边距时，当下面的第二个元素没有上留白（padding）或上边框（border－top）时，假如此元素的第一个子元素存在且设置上边距时，这时会产生子元素设置的上边距应用到了父元素对于第一个垂直方向上的元素的上边距上。

即那么这个父元素盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠。

看如下图和代码：

可以看到，明明没有设置first 和 second 俩个div之间的外边距，只给second的子元素son设置了上边距就产生了这个问题？

那么如何解决呢。

解决方案1:

为父元素增加一个border-top或者padding-top 或者over:hidden;即可解决这个问题

 1）但是都存在缺点，设置border－top，无缘无故多了一个上边框的宽度出来

 2）设置padding－top，计算高度的时候无缘无故多了

 3）设置overflow：hidden；假如存在需要超出元素框的内容时，将失效。

那么什么方法是最好的呢？ 我们回过头来看一下产生这个问题的根本原因：父元素盒子的上边距会和其内部文档流中的第一个子元素的上边距重叠！！！

这里的解决方案将用到一个伪类标签 :before，即second:before{ ... },在second元素框中的最前面默认添加一个内容，使得son元素不成为second的第一个子元素就可以了。

那么我们就来试一试在内部样式表中添加这一段代码：

#second:before{
display: table;
content: "";
}

再次刷新页面，发现此时垂直外边距的问题已解决：

其实只要抓住了问题的本质，就可以轻松的解决这类的问题。（与之类似的还有一个清除自身浮动带来的影响也是如此，只要添加的代码段中，再加一行clear:both;即自己的问题自己解决，不影响其他的元素）。

有兴趣的小伙伴可以自己试一试哦～