css margin塌陷问题

我们先看个例子：

<style>
    *{
        margin: 0;
        padding: 0;
    }
    div{
        width: 100px;
        height: 100px;
        background-color: red;
    }
    .one{
        margin-bottom: 20px;
    }
    .two{
        margin-top: 30px;
    }
</style>
<div class="one"></div>
<div class="two"></div>

效果：

我们从代码中可以看到，上面的盒子给了一个margin-bottom:20px;下面的盒子给力一个margin-top：30px;理论上来说，这两个盒子应该有50px的间距，这是为什么呢？

原因：这是因为在标准流中，margin在垂直方向出现了塌陷现象，以最大的为准，所以两个盒子间距就是30px;