什么是垂直外边距合并?说说合并后的几种情况?

什么是垂直外边距合并

• 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
• 合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
• 实际工作中，垂直外边距合并问题常见于第一个子元素的margin-top会顶开父元素与父元素相邻元素的间距，而且只在标准浏览器下(FirfFox、Chrome、Opera、Sarfi)产生问题，IE下反而表现良好。

合并后的几种情况

相邻块元素垂直外边距的合并

当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom，下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和，而是两者中的较大者。
这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。

解决方案：

• 尽量只给一个盒子添加margin值。

嵌套块元素垂直外边距的合并

对于两个嵌套关系的块元素，如果父元素没有上内边距及边框，则父元素的上外边距会与子元素的上外边距发生合并，合并后的外边距为两者中的较大者，即使父元素的上外边距为0，也会发生合并。

解决方法：

• 父盒子可以加个边框
• 用overflow（加了这句话在浏览器中可以看到也是自动加了1px的边框）。
• 可以为父元素定义上内边距。