文/Jack同学
margin塌陷问题在布局开发的过程中也是经常遇到，原理和解决方法都不难。那margin塌陷是什么呢？其实margin塌陷的意思就是：两个垂直方向的元素，他们的垂直方向的margin值是共用的，所以两个元素垂直方向都设置有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塌陷
两个元素设置的margin合并了，只有50px。所以呢，像这种同一级的两个元素，并且垂直排列，如果要设置margin值最好给一个元素设置值就行了，另一个不设置。举上面的例子，要想达到间隔100px的效果，只要给box1一个margin-bottom:100px就行了。想这种margin塌陷问题，只要知道了原理，以后碰到，完全可以凭借数学计算去弥补。
