解決margin塌陷和margin合併

啃骨頭的貓發表於2019-05-25

 

<!doctype html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>嘿嘿嘿</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
        
    </head>
    <style type="text/css">
        body{
            background: #f5f5f5;
        }
        .father-box{
            width: 150px;
            height: 150px;
            background-color: black;
            margin: 20px;
        }
        .father-box .son-box{
            width: 50px;
            height: 50px;
            background-color: greenyellow;
            margin: 20px;
        }
        .brother-two{
            width: 150px;
            height: 20px;
            background-color: gold;
            margin: 20px;
        }
    </style>
    <body>
        <div class="father-box brother">
            <div class="son-box">
            
            </div>
        </div>
        <div class="brother brother-two">
            黃色的是20px的高度
        </div>
        
    </body>

</html>

結果為：

上面執行的程式碼可以看到兩個經典的cssbug:

     father-box ：黑色盒子；son-box：綠色盒子；brother-two：黃色盒子

1、margin合併

      黑色 和 黃色的盒子 都設定了 margin:20px， 按理說黑色和黃色的垂直間距是40px,  但是事實是20px, 這就是margin合併造成的。

      margin合併：普通文件流中塊級元素的垂直外邊距會互相合並，也就是會以他們之間外邊距大的為準，比如：

      我如果現在將黃色的盒子的margin-top設為10px;黃色和黑色之間的間距不會改變，依舊是20px;但是如果設為30px,那麼黃色和黑色之間的間距就會以較大的30px為準，變為30px;

      解決方法：

      推薦也是常用的：如果要上下間距為40px,只需要黃色的盒子上邊距設為40px,黑色的盒子不用設下邊距，這樣就可以了，意思是不需要強行解決這個bug,只需要將一邊的邊距設為兩個盒子邊距的和就可以了

      不推薦也是不常用的（這樣會改變html結構）：在黃色和黑色的盒子外面在加一個盒子，讓這個加的外層盒子的渲染規則改為BFC（）

2、margin 塌陷

     黑色 和 綠色 的margin-top都設為了20px，但是綠色並沒有距離黑色上邊20px。

     margin 塌陷：普通文件流中父子塊級元素，如果父元素沒有設定上內邊距或上邊框，子元素的上邊距就會和父元素的上邊距重合，以他們兩個中間最大上邊距為準，與距離他們最近的盒子隔開。如: 

     如果我現在給綠色的盒 子設定margin-top:40px, 那麼黑色和綠色的盒子會一起向下移動20px。

     解決方法：

     將父元素的渲染規則改為BFC（）

 

這裡簡單的列舉一些觸發BFC的方法：

      1、float:left/right;

      2、position:absolute;

      3、overflow:hidden;

      4、display:inline-block;

 

brother-two

相關文章