外边距重叠问题（外边距合并）

外边距合并问题：

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

一般是针对垂直而言的

第一种：父子级

子元素在父元素内，子元素的margin-top会与父元素的margin-top重叠，值等于二者中较大的，如果只有子元素设置了margin-top，则显示为父元素的margin-top 。

解决方案：

（1）给父级元素加border

border: 2px solid red;

（2）给父级元素加padding

padding:10px;

（3） 给父级元素加overflow

 overflow: hidden;

（4）给父级或子级加上浮动

float: left;

（5）给父级或子级加上绝对定位属性

position: absolute;

（6）给父级或子级加上display:inline-block

display:inline-block；

第二种：兄弟级

如果都是正数,会合并,取值较大的一个
如果都是负数,会合并,取绝对值较大的那一个值
如果一正一负,不会合并，二者相加

解决方案：
创建一个不同的BFC，并添加overflow属性

overflow:hidden;

注释：

只有普通文档流中块框的垂直外边距才会发生外边距合并。
行内框、浮动框或绝对定位之间的外边距不会合并。