塌陷問題
當兩個盒子在垂直方向上設置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>
>
> 
>
對box1我們?yōu)槠湓O置margin-bottom：50px;
對box2我們?yōu)槠湓O置margin-top： 40px;
>
> 我們肯定會很理所當然的認定這兩個盒子之間的距離為90px钓瞭，事實上并非如此.
如下圖所示：
>
>
兩盒子之間的距離僅是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>
如圖示
1.png
當為子盒子添加margin-top：10px;時會發(fā)生如下情況：
1.png
子盒子和父盒子之間并沒出現期望的10px間隙而是父盒子與子盒子一起與頁面頂端產生了10px間隙。
解決方法：
（1）為父盒子設置border嚷兔，為外層添加border后父子盒子就不是真正意義上的貼合。
（2）為父盒子添加overflow：hidden壶运；
（3）為父盒子設定padding值。
