【前端基础5.0】CSS-如何解决margin塌陷问题

文/Jack同学

margin塌陷问题在布局开发的过程中也是经常遇到，原理和解决方法都不难。那margin塌陷是什么呢？其实margin塌陷的意思就是：两个垂直方向的元素，他们的垂直方向的margin值是共用的，所以两个元素垂直方向都设置有margin的时候，就感觉短了很多，很像塌陷掉了一样。

看演示：

/*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塌陷问题，只要知道了原理，以后碰到，完全可以凭借数学计算去弥补。