塌陷问题

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

垂直并列（少见）

/HTML部分/
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
</body>
/CSS部分/
<style>
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background: yellowgreen;
}
.box2{
width: 200px;
height: 200px; background: gray;
}
</style>

> 
> ![1.png](https://img.haomeiwen.com/i5233502/1479ddcd45096868.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
> 
对box1我们为其设置margin-bottom：50px;
对box2我们为其设置margin-top： 40px;
> 
> 我们肯定会很理所当然的认定这两个盒子之间的距离为90px，事实上并非如此.
如下图所示：
> 
![1.png](https://img.haomeiwen.com/i5233502/8c25e56688105b16.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
> 
两盒子之间的距离仅是50px，也就是说两盒子之间的margin出现了重叠部分，故而我们可以得出：**垂直之间塌陷的原则是以两盒子最大的外边距为准。**
 
* ####嵌套关系(常见)
> ```
/*CSS部分*/
<style>
.box1{
    width:400px;
    height:400px;
    background: pink;
}
.box2{
    width:200px;
    height:200px;
    background: lightblue;
}
</style>
/*HTML部分*/
<body>
    <divclass="box1">
    <divclass="box2"></div>
</div>
</body>

如图示