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塌陷问题及解决的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。