詳解CSS外邊距折疊引發(fā)的問題

發(fā)布時間：2019-02-27 15:32:01 作者：lxjjjjjj

我要評論

這篇文章主要介紹了詳解CSS外邊距折疊引發(fā)的問題的相關資料，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

第一種：兩個塊級元素的上下邊距折疊

第二種：父元素和子元素（或者最后一個元素）的外邊距

第三種：空的塊級元素的上下外邊距

折疊的根本原因：

margin之間直接接觸，沒有阻隔

折疊后外邊距的計算：

1.如果兩個外邊距都是正值，折疊后的外邊距取較大的一個
2.如果兩個外邊距一正一負，折疊后的邊距為邊距之和
3.如果兩個外邊距都為負數(shù)，折疊后邊距為較小的邊距

解決方案：解決方法實際上也就是阻止外邊距直接接觸

第一種、第三種：只有靜態(tài)流的元素才會發(fā)生外邊距合并故設置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元素隔開，比如在父元素里加一行文字也可以

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

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。