CSS兩個經典BUG--margin塌陷與margin合併
阿新 • • 發佈：2018-12-22
margin塌陷問題
現象
先上示例程式碼
<div class="warpper">
<div class="box"></div>
</div>
* {
padding: 0;
margin: 0;
}
.warpper {
height: 200px;
width: 200px;
background-color: gray;
}
.box {
height: 100px;
width:100px;
background-color: green;
}
兩個巢狀的盒子如下所示
給巢狀在裡面的子元素盒子攝設定一個margin-top值，我們的設想是子元素會相對於父元素向下移動，但是效果與我們想的卻不太一樣。
我們看到子元素是相對於瀏覽器的頂端向下移動了，彷彿父元素沒有頂一樣，這種現象我們就稱之為margin塌陷。
解決方案
- 給父元素設定border。這種方法可以解決問題，但是在實際開發中不推薦，因為這樣會破壞頁面的樣式；
- 使用bfc來解決。觸發bfc有以下幾種方式：
float的值不為none
overflow的值不為visible
display的值為table-cell、tabble-caption和inline-block之一
position的值不為static或者releative中的任何一個
根據業務需求任選一種方式設定到父元素中，就可以解決margin塌陷問題；根據業務需求任選一種方式設定到父元素中，就可以解決margin塌陷問題； - 給父元素加一個padding。這種方式也不推薦，道理和第一條一樣。
修改後的程式碼如下:
* {
padding: 0;
margin: 0;
}
.warpper {
height: 200px;
width: 200px;
background-color: gray;
overflow: hidden;
}
.box {
margin-top: 100px;
height: 100px;
width:100px;
background-color: green;
}
margin合併問題
margin塌陷問題是父子級元素之間的bug，現在來看另一個經典的bug–margin合併問題。與margin塌陷不同，margin合併是兄弟級元素之間的bug。
先上程式碼
<body>
<div class="demo1">1</div>
<div class="demo2">2</div>
</body>
-----------------------------------------------------------------------
* {
padding: 0;
margin: 0;
}
.demo1 {
background-color: gray;
}
.demo2 {
background-color: red;
}
效果如圖所示：
我們給上面的div加一個下邊距100px，給下面的div加一個上邊距200px，根據設想，此時兩個div的間距應該是300px。但是經過實驗後我們發現兩個div之間的距離還是隻有200px。
* {
padding: 0;
margin: 0;
}
.demo1 {
background-color: gray;
margin-bottom: 200px;
}
.demo2 {
background-color: red;
margin-top: 100px;
}
這就是margin合併問題。即所謂的外邊距合併就是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
解決方法有兩種，第一種是直接改變其中一個外邊距的值，使之達到想要的效果（推薦使用）；另外一種解決方式是將兄弟元素分別作為子元素放在塊級元素內，然後將其父級元素的渲染規則該為BFC。(不推薦使用,會破壞HTML文件結構)。