網頁標準文檔流中垂直方向的margin塌陷現象

時間 2019-11-21

標籤網頁標準文檔垂直方向 margin 現象欄目 HTML 简体版

原文原文鏈接

在標準文檔流中（即沒有浮動，若是設置了浮動那就不會出現這中狀況了），body中有兩個div元素，這兩個div元素的寬、高都是200px，第一個div設置了margin-bottom:t0px;第二個div設置了margin-top:20px，那麼實際上兩個div元素之間的距離是50px，這就是margin塌陷現象，而且margin塌陷仍是以大的一方爲準。如圖片：
spa

<style>
    body,div{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 200px;
        height: 100px;
        margin-left: 100px;
        color: #fff;
        font-weight: 600;
    }
    .box1{
        background-color: #f10;
        margin-bottom: 50px;
    }
    .box2{
        background-color: #f60;
        margin-top: 20px;
    }
</style>

<body>
    <div class="box box1">
        margin-bottom: 50px;
    </div>
    <div class="box box2">
        margin-top: 20px;
    </div>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。