子元素設置margin-top爲何影響了父元素

時間 2019-12-09

標籤元素設置 margin 爲何影響欄目 CSS 简体版

原文原文鏈接

<style type="text/css"> 
    *{
        margin: 0px; padding: 0px; 
    }
    .show{
        margin: 0px auto;
        width: 200px;
        height: 100px;
        background-color: #999999;
    }
    .show h2{
        margin-top: 50px;
        cursor: pointer;
    }
</style>

<body>
    <div class="show">
       <h2>crystal</h2>
    </div>
</body>

兩個div，子元素div設置了margin-top後，發現並無跟想象的同樣，而發現父元素產生了間距。
如上圖。css

原理：margin摺疊
在css2.1盒模型仲規定的內容
spa

由於嵌套也屬於毗鄰，因此在樣式表中優先級更高子元素的margin會覆蓋外層父元素定義的margin。code

父元素的第一個子元素的上邊距margin-top若是碰不到有效的border或者padding.就會不斷一層一層的找本身「領導」(父元素，祖先元素)的麻煩。只要給領導設置個有效的 border或者padding就能夠有效的管制這個目無領導的margin防止它越級，假傳聖旨，把本身的margin當領導的margin執行。it

解決辦法：
一、父元素或者子元素使用浮動或者絕對定位。
二、父級設置overflow:hidden
三、父級設置padding（破壞非空白的摺疊條件）
四、父級設置borderclass

相關標籤/搜索