CSS外边距重叠及防止方法

边界重叠是指两个或多个盒子（父子或者兄弟之间）的相邻边界重合在一起而形成一个单一边界。

不会发生重叠的情况：

1 水平边距不会发生重叠；

2 相邻的盒模型中，如果其中一个是float，垂直margin不会重叠，并且浮动的盒模型和它的子元素之间也一样；

3 设置overflow 属性的元素和它的子元素之间不会重叠，（overflow:visible除外）；

4 设置绝对定位的盒模型（相邻or父子）；

5 设置display:inline-block的元素（相邻or父子）；

重叠margin值的计算方法：

1 全部为+，取最大值；

2 全部为-，取绝对值，然后用0-最大值；

3 不全是正值，取绝对值，用正值-最大值；

外边距重叠的意义：

外边距的重叠只产生在普通流文档的上下外边距之间。外边距重叠，盒子之间就不会产生双倍的距离。

防止外边距重叠的解决方法：

1 外层元素psdding代替；

2 内层元素透明边框border:1px solid transparent;

3 内层元素绝对定位position:absolute;

4 外层元素overflow:hidden;

5 内层元素float:left; display:inline-block;

6 内层元素 padding:1px;

eg: