CSS垂直外边距合并

1.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例。

• 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。其中两个相邻的外边距都是正数时，合并结果是它们两者之间较大的值；两个相邻的外边距都是负数时，合并结果是两者绝对值的较大值；
  两个外边距一正一负时，合并结果是两者的相加的和。

外边距合并的场景：

• 当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并。

防止此种情况下的外边距合并可以设置元素的display:inline-block；
如果只有两个相邻元素可以设置后面的元素float:left；
设置父元素的display：flex可以让相邻元素脱离垂直排列关系，故也可以防止上下外边距合并,但子元素的宽高变得不受限。

0_1481373444240_屏幕快照 2016-12-10 下午8.23.42.png

• 当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并，即为父子外边距合并的情况，如下图：

  
  0_1481363708193_屏幕快照 2016-12-10 下午5.54.47.png

阻止父子元素的边距合并可以设置父元素的border和padding参数，也可以设置父元素float:left,display:inline-block,positon:absolute,overflow(除了visible均可)来实现,还有一种是给父元素添加内容。（例如下图所示）

0_1481373895143_屏幕快照 2016-12-10 下午8.43.39.png

• 假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并；如果这个外边距遇到另一个元素的外边距，它还会发生合并。
  防止空元素造成的外边距合并可以先给空元素设置相关参数，让其变成有参数的元素，然后再参照其他两种边距合并情况下的处理方式去修复。