盒子模型之外边距叠加

在开发过程中，可能会遇到这样的一种情况，有相邻的两个块元素A和B，其中A定义了一个margin-bottom,B定义了一个margin-top。当我们在浏览器中查看时，明显发向A和B的垂直距离明显小于相加之和。这个现象是由外边距叠加所引起的。
外边距叠加有三种情况：
1、同级元素叠加
当一个元素出现在另一个元素上面的时候，第一个元素的下边距就会和第二个元素的上边距发生合并。
2、父子元素叠加
当一个元素包含在另外一个元素中时，加入没有padding和border把外边距分隔开，父元素和子元素的相邻上下外边距也会发生合并。。
3、空元素
空元素：没有子元素或文字内容的元素，例如br、hr等等
当一个空元素有上下外边距时，如果没有border或者padding，则元素的上边距和下边距就会合并。
当空元素的外边距碰到另一元素的外边距时，他们也会发生合并。

注意：

• 水平外边距margin-left和margin-right永远不会叠加
• 垂直外边距margin-top和margin-bottom只有在以上三种情况才会发生叠加
• 外边距叠加后的高度，等于发生叠加之前的两个外边距中的最大值
• 外边距叠加针对的时block以及line-block，不包括inline元素（inline元素的垂直外边距设置无效）