轉載：margin外邊距合併問題以及解決方式

時間 2019-12-07

標籤轉載 margin 邊距合併問題以及解決方式欄目 CSS 简体版

原文原文鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .div{
          /*  overflow: hidden/auto;*//*利用該屬性或者經過給父級元素設置border能夠避免出現父級元素的margin合併的狀況，當沒有設置這兩個屬性之一時，該div的margin-top值會取div1的margin-top和其自身margin-top的最大值*/
         /* border:1px solid red;*/
            margin:0 auto;
            margin-top:10px;
            width:300px;
            background: #aaa;

        }
        .div1{
            width:200px;
            height:200px;
            background: red;
            margin:20px 0px;
        }
        .div2{
            width:200px;
            background: green;
            margin: 10px 0px;
            height:200px;
        }
    </style>
</head>
<body>
<div class="div">
    <div class="div1"></div>
    <div class="div2"></div>
</div>

</body>
</html>

1、在div裏面有子元素div1時，div在沒有設置overflow：hidden或者是border屬性時，div的margin-top的值爲div/div1中的margin-top的最大值。上面的結果如圖：css

注意：div1在div中的margin-top值爲0px;html

2、當父級div設置了上述屬性中的一個時（如overflow：hidden/auto），結果以下圖所示：spa

div的margin-top值爲其自身設置的值10px，同時div1的margin-top值也是正常的20px3d

3、當元素是兄弟元素時，在不設置float和position:absolute時margin-bottom和margin-top會自動的合併爲二者中的最大值。如上面的div1和div2二者之間的margin距離爲20px;當二者同時設置了float：Left時，二者之間的margin值是30px,如圖所示：code

設置float前：設置float後htm