css中margin元素塌陷問題

css中margin元素塌陷

繼承結構的元素，水平與垂直結構上的margin取其最大值

<div class="box">
    <div class="dad">
        <div class="son"></div>
    </div>
</div>

.box{
     width: 300px;
    height: 300px;
}
.dad{
    width: 100px;
    height: 100px;
    background: #000;
    margin-top: 50px;
    margin-left: 50px;
}
.son{
    margin-left: 100px;
    /*margin-top: 100px;*/
    width: 50px;
    height: 50px;
    background: blue;
    }

根據上述代碼先把margin-top註釋掉(效果)

我們的藍色方塊根據黑色方塊向左移動了100px，很正常，但是當我們將註釋的代碼打開的時候，根據上面的經驗我們預測應該看到的是藍色的方塊到了黑色的方塊的右下角

我們可以看到他並沒有你找我們預想的那樣，藍色的移動到黑色的右下角，而是黑色的跟着藍色的下移了50px，當然這就是margin的塌陷問題了，就是這個box好像不能作爲dad移動的參照物了，這就是取名爲margin塌陷的原因。在水平和垂直方向上誰大取誰的而且是相對於承載這個元素的元素