我們先看個例子：

<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;