margin-塌陷问题

塌陷问题

当两个盒子在垂直方向上设置margin值时，会出现一个有趣的塌陷现象。

• 垂直并列（少见）

/HTML部分/

box1

box2

/CSS部分/

> 
> ![1.png](http://upload-images.jianshu.io/upload_images/5233502-1479ddcd45096868.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
> 
对box1我们为其设置margin-bottom：50px;
对box2我们为其设置margin-top： 40px;
> 
> 我们肯定会很理所当然的认定这两个盒子之间的距离为90px，事实上并非如此.
如下图所示：
> 
![1.png](http://upload-images.jianshu.io/upload_images/5233502-8c25e56688105b16.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
> 
两盒子之间的距离仅是50px，也就是说两盒子之间的margin出现了重叠部分，故而我们可以得出：**垂直之间塌陷的原则是以两盒子最大的外边距为准。**
 
* ####嵌套关系(常见)
> ```
/*CSS部分*/

/*HTML部分*/

    
    

如图示

1.png

当为子盒子添加margin-top：10px;时会发生如下情况：

1.png

子盒子和父盒子之间并没出现期望的10px间隙而是父盒子与子盒子一起与页面顶端产生了10px间隙。

解决方法：

（1）为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合。
（2）为父盒子添加overflow：hidden；
（3）为父盒子设定padding值。