文/Jack同學
margin塌陷問題在布局開發(fā)的過程中也是經(jīng)常遇到，原理和解決方法都不難怯疤。那margin塌陷是什么呢讹语？其實margin塌陷的意思就是：兩個垂直方向的元素售担，他們的垂直方向的margin值是共用的脊髓，所以兩個元素垂直方向都設(shè)置有margin的時候平道，就感覺短了很多，很像塌陷掉了一樣供炼。
看演示：
<!--html代碼-->
<div class="box1"></div>
<div class="box2"></div>
/*css代碼*/
.box1 {
width: 200px;
height: 200px;
background-color: #abcdef;
}
.box2 {
width: 200px;
height: 200px;
background-color: #666;
margin-top: 100px;
}
得到的樣子：
margin塌陷
兩個元素設(shè)置的margin合并了一屋，只有50px。所以呢袋哼，像這種同一級的兩個元素冀墨，并且垂直排列，如果要設(shè)置margin值最好給一個元素設(shè)置值就行了涛贯，另一個不設(shè)置诽嘉。舉上面的例子，要想達到間隔100px的效果弟翘，只要給box1一個margin-bottom:100px就行了虫腋。想這種margin塌陷問題，只要知道了原理稀余，以后碰到悦冀，完全可以憑借數(shù)學計算去彌補。
