CSS外邊距摺疊引起的問題

時間 2019-12-04

標籤 css 邊距摺疊引起問題欄目 CSS 简体版

原文原文鏈接

CSS外邊距摺疊

第一種：兩個塊級元素的上下邊距摺疊
第二種：父元素和子元素（或者最後一個元素）的外邊距
第三種：空的塊級元素的上下外邊距
摺疊的根本緣由：
margin之間直接接觸，沒有阻隔
摺疊後外邊距的計算：
1.若是兩個外邊距都是正值，摺疊後的外邊距取較大的一個
2.若是兩個外邊距一正一負，摺疊後的邊距爲邊距之和
3.若是兩個外邊距都爲負數，摺疊後邊距爲較小的邊距
解決方案：解決方法實際上也就是阻止外邊距直接接觸
第一種、第三種：只有靜態流的元素纔會發生外邊距合併故設置float position inline-block均可以測試

<style>
.bother{
            width: 50px;
            height: 50px;
            margin: 50px;
            background-color: #44cc00;
            /*1.float: left;*/
            /*2.position: absolute;*/
            <!--3.display: inline-block;-->
        }
        /*.father{*/
            /*2.position: relative;*/
            /*background:#cccdd1;*/
        /*}*/
        /*.bother1{*/
            /*2.top:50px;*/
        /*}*/
        /*.bother2{*/
            /*2.top:250px;*/
        /*}*/
</style>
<body>
<div class="father">
<div class="bother1 bother"></div>
<div class="bother2 bother"></div>
</div>
</body>

第二種（嵌套的狀況）只要border padding非0或者有inline元素隔開，好比在父元素里加一行文字也能夠spa

<style>
        .margin-box{
            width: 50px;
            height: 50px;
            /*margin: 50px;設置了上下左右的外邊距*/
            margin: 50px;
            /*margin-left: 50px;*/
            /*margin-right: 50px;*/
            /*div是塊級元素，因此設置左右外邊距也不會使父元素有左右外邊距*/
            background-color: #fae900;
            /*5.2 display: inline-block;*/
        }
        .father{
            <!--3.overflow: hidden;-->
            background:#cccdd1;
            /*1.border: 1px solid;*/
            /*2.padding: 20px;*/
            /*5.1 display: inline-block;*/
        /*若是沒有border和padding只有測試這個字，那麼子元素的外邊距不會在父元素裏顯示*/
        /*而僅僅只有上外邊距顯示，下外邊距不顯示*/
        /*而若是在子元素下面一樣寫一個測試，那麼下外邊距也會顯示*/
        }

    </style>
</head>
<body>
<div class="father">
    <!--4.<span>測試</span>-->
    <div class="margin-box"></div>
    <!--4.<span>測試</span>-->
</div>
</body>

相關標籤/搜索

每日一句

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