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

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

我要評(píng)論

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

第一種：兩個(gè)塊級(jí)元素的上下邊距折疊

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

第三種：空的塊級(jí)元素的上下外邊距

折疊的根本原因：

margin之間直接接觸，沒(méi)有阻隔

折疊后外邊距的計(jì)算：

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

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

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

<style>
        .margin-box{
            width: 50px;
            height: 50px;
            /*margin: 50px;設(shè)置了上下左右的外邊距*/
            margin: 50px;
            /*margin-left: 50px;*/
            /*margin-right: 50px;*/
            /*div是塊級(jí)元素，所以設(shè)置左右外邊距也不會(huì)使父元素有左右外邊距*/
            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;*/
        /*如果沒(méi)有border和padding只有測(cè)試這個(gè)字，那么子元素的外邊距不會(huì)在父元素里顯示*/
        /*而僅僅只有上外邊距顯示，下外邊距不顯示*/
        /*而如果在子元素下面同樣寫(xiě)一個(gè)測(cè)試，那么下外邊距也會(huì)顯示*/
        }

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。