解决margin塌陷的问题_margin塌陷问题及解决
margin塌陷現象：在垂直方向如果有兩個元素的外邊距有相遇，在瀏覽器中加載的真正的外邊距不是兩個間距的加和，而是兩個邊距中值比較大的，邊距小的塌陷到了邊距值大的值內部。
1. 同級元素塌陷：上面的元素有下邊距，下面的元素有上邊距，兩個邊距相遇，真正盒子間距離是較大的那個值。
首先寫兩個盒子box1，box2并為其設置樣式。
* {
margin: 0;
padding: 0;
}
.box1 {
width: 200px;
height: 200px;
background-color: skyblue;
}
.box2 {
width: 200px;
height: 200px;
background-color: tomato;
}
這是box1這是box2效果圖如下:
現在對box1設置margin-bottom:20px，對box2設置margin-top：100px;.box1 {
width: 200px;
height: 200px;
background-color: skyblue;
margin-bottom: 20px;
}
.box2 {
width: 200px;
height: 200px;
background-color: tomato;
margin-bottom: 100px;
}
正常情況下我們會認為兩個盒子的間距應該為上下邊距相加為120px，但事實并非如此。
由上圖清晰可見兩個盒子之間的間距為100px，并不是兩個盒子上下邊距之和，這時我們使用F12打開控制臺可見如下圖現象：
box2
box1
盒子box1的下邊距依然存在，只是不顯示了，由此可見邊距小的塌陷到了邊距值大的值內部，所以間距為box2的邊距100px。
2. 父子元素塌陷：父子元素之間也會出現margin塌陷，(1)父元素和子元素都設置了同方向的margin-top值，兩個屬性之間沒有其他內容進行隔離，導致兩個屬性相遇，發生margin塌陷。(2)本身父元素與上一個元素的距離是0，子元素如果設置了垂直方向的上邊距，會帶著父級元素一起掉下來(父元素的上邊距0塌陷到了子元素的上邊距50里面)。
.box1 {
width: 200px;
height: 200px;
background-color: skyblue;
}
.box2 {
width: 100px;
height: 100px;
background-color: tomato;
}
效果圖如下：
如果我們給box1設置margin-top: 20px，box2設置margin-top: 50px，這時效果如下：
由此可見：父元素和子元素都設置了同方向的margin-top值，兩個屬性之間沒有其他內容進行隔離，導致兩個屬性相遇，發生margin塌陷。
如果我們只給子元素設置margin-top: 50px，這時效果如下：
由此可見：本身父元素與上一個元素的距離是0，子元素如果設置了垂直方向的上邊距，會帶著父級元素一起掉下來(父元素的上邊距0塌陷到了子元素的上邊距50里面)。
解決方法：
(1)同級元素：如果兩個元素垂直方向有間距，只需要設置給一個元素，不要進行拆分。
(2)父子元素：讓兩個邊距不要相遇，中間可以使用父元素border或padding將邊距分隔開；更加常用的方法，父子盒模型之間的距離就不要用子元素的margin去設置，而是用父元素的padding擠出來。
注：水平方向沒有margin塌陷。
總結
以上是生活随笔為你收集整理的解决margin塌陷的问题_margin塌陷问题及解决的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 混合云部署MySQL集群_数据库混合云解
- 下一篇： java 大臣的旅费_PREV-9-蓝桥