tip:為能更直觀地學習，本文章已省略部分 css 樣式代碼。

我相信下面的情形大家在日常工作中常常碰到：在制作靜態頁面中，為了頁面整體的協調與美觀，我們想讓子盒子 image-div 的上邊沿距離父盒子 header-div 的上邊沿有一定間距。

現頁面效果：

目標頁面效果：

為了達成上圖的效果，我們首先就能想到給子盒子設置一個上外邊距：

<style>.image-div { /*子盒子*/margin-top:25px;} </style>

讓我們來看看結果如何呢？

結果和我們所預料的并不相同，子盒子 image-div 并沒有和父盒子 header-div 的上邊沿形成一定的間距。這兩個盒子竟然一起往下移動了，多出了紅框區域。

而這種現象，就是 CSS 中常遇到的“邊距塌陷”問題中的一種。

邊距塌陷

流內塊級元素的 top 與 bottom 外邊距有時會合并（塌陷）為單個外邊距（合并后最大的外邊距），這樣的現象稱之為外邊距塌陷（margin collapsing）。

導致邊距塌陷的原因是外邊距，有以下四種情況計算情況：

• 如果都是正數，則取最大值

• 如果相同，則取其中之一

• 如果有正有負，則取最大的正數加上最小的負數之和

• 如果都是負數，則取最小值。

相鄰（兄弟）盒子之間的塌陷

在 CSS 當中，相鄰兩個兄弟盒子的外邊距區域是公共的，這會導致相鄰兄弟盒子之間的邊距出現塌陷情況。

下圖是相關示例，設置div1盒子的下邊距，另設置下方 div2 盒子的上邊距：

<style>#block1 {margin-bottom: 20;}#block2 {margin-top: 10;} </style><div id = "block1">div1</div> <div id = "block2">div2</div>

在瀏覽器開發者工具先看 div1 的 margin 區域（紅框）：

div2 的 margin 區域（綠框區域）：

對應情況：兩個盒子之間的外邊距如果都是正數，則取最大值。

下方為示例 2，我們將示例 1 中的外邊距改為負數：

<style> #block1 {margin-bottom: -20; } #block2 {margin-top: -10; } </style><div id = "block1">div1</div> <div id = "block2">div2</div>

兩個盒子的重疊距離為兩個負數中最小的數“-20px”（絕對值最大 |-20px|）。

解決方法

如果想要避免這種塌陷，可以通過下面兩種方法解決：

• 只給其中一個盒子設置外邊距

• 給兩個盒子分別套一個父盒子，父盒子屬性設置為 overflow:hidden，同時讓父盒子是密閉區域，從而觸發 BFC

父子盒子之間的塌陷

然而設置父盒子也不是萬全的，當出現以下情況時外邊距會塌陷：

• 塊元素 的 margin-top 與 它的第一個子元素 的 margin-top 之間沒有 border、padding、inline content、clearance 來分隔。

• 塊元素 的 margin-bottom 與 它的最后一個子元素 的 margin-bottom 之間沒有 border、padding、inline content、height、min-height、max-height 分隔。

同時，如果父子公用一段上邊距區域，比如父盒子沒有上邊距時，子盒子設上邊距。這時子盒子帶著父盒子向下移動（相當于給父盒子設置外邊距）就會產生盒子塌陷。

<style> *{margin:0px;padding: 0px; } .div1{width:300px;height: 200px;background-color: cornflowerblue;margin:0px; } .div2{background-color: wheat;margin: 30px; } </style><div class="div1"><div class="div2">div2 </div> </div>

父元素不設置外邊距，第一個子元素設置 margin:30px，會發現父元素與子元素一起往下移動了 30px：

解決方法

想要解決這種塌陷的核心辦法是把父子盒子分隔開。我們可以給父盒子設置邊框或者內邊距，或者給父盒子標簽添加 overflow:hidden 屬性，通過觸發 BFC 規則，也就是塊級格式上下文，把父級渲染成一個獨立區域，從而解決父子盒子之間的塌陷問題。

BFC 規則觸發方式：

• float 不為 none

• overflow 不為 visible（常用 overflow:hidden）

• position 為 fixed，absolute

• display 為 flex，inline-block，table-cell

當然，在選擇塌陷的解決方案時，應依據具體的情境，不能所有情況都使用相同的方案，否則會造成其他問題的出現哦~

那么，在我們學習以上知識后，就能清晰地知道開頭引入的問題正是父子盒子間的塌陷，我們可以通過觸發 BFC 規則（僅其中一種方案）來解決：

<style>.image-div { /*子盒子*/margin-top:25px;}.header-div { /*父盒子*/overflow:hidden; /*觸發bfc*/} <style>

以上就是 CSS 盒子邊距常見的塌陷與解決辦法，希望能夠對你有所幫助。

總結

以上是生活随笔為你收集整理的CSS 盒子的边距塌陷的全部內容，希望文章能夠幫你解決所遇到的問題。

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