tip:為能更直覺地學習，本文章已省略部分 css 樣式代碼。
我相信下面的情形大家在日常工作中常常碰到：在制作靜态頁面中，為了頁面整體的協調與美觀，我們想讓子盒子 image-div 的上邊沿距離父盒子 header-div 的上邊沿有一定間距。
現頁面效果：
目标頁面效果：
為了達成上圖的效果，我們首先就能想到給子盒子設定一個上外邊距：
讓我們來看看結果如何呢？
結果和我們所預料的并不相同，子盒子 image-div 并沒有和父盒子 header-div 的上邊沿形成一定的間距。這兩個盒子竟然一起往下移動了，多出了紅框區域。
而這種現象，就是 css 中常遇到的“邊距塌陷”問題中的一種。
流内塊級元素的 top 與 bottom 外邊距有時會合并（塌陷）為單個外邊距（合并後最大的外邊距），這樣的現象稱之為外邊距塌陷（margin collapsing）。
導緻邊距塌陷的原因是外邊距，有以下四種情況計算情況：
如果都是正數，則取最大值
如果相同，則取其中之一
如果有正有負，則取最大的正數加上最小的負數之和
如果都是負數，則取最小值。
在 css 當中，相鄰兩個兄弟盒子的外邊距區域是公共的，這會導緻相鄰兄弟盒子之間的邊距出現塌陷情況。
下圖是相關示例，設定div1盒子的下邊距，另設定下方 div2 盒子的上邊距：
在浏覽器開發者工具先看 div1 的 margin 區域（紅框）：
div2 的 margin 區域（綠框區域）：
對應情況：兩個盒子之間的外邊距如果都是正數，則取最大值。
下方為示例 2，我們将示例 1 中的外邊距改為負數：
兩個盒子的重疊距離為兩個負數中最小的數“-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 分隔。
同時，如果父子公用一段上邊距區域，比如父盒子沒有上邊距時，子盒子設上邊距。這時子盒子帶着父盒子向下移動（相當于給父盒子設定外邊距）就會産生盒子塌陷。
父元素不設定外邊距，第一個子元素設定 margin:30px，會發現父元素與子元素一起往下移動了 30px：
想要解決這種塌陷的核心辦法是把父子盒子分隔開。我們可以給父盒子設定邊框或者内邊距，或者給父盒子标簽添加 overflow:hidden 屬性，通過觸發 bfc 規則，也就是塊級格式上下文，把父級渲染成一個獨立區域，進而解決父子盒子之間的塌陷問題。
bfc 規則觸發方式：
float 不為 none
overflow 不為 visible（常用 overflow:hidden）
position 為 fixed，absolute
display 為 flex，inline-block，table-cell
當然，在選擇塌陷的解決方案時，應依據具體的情境，不能所有情況都使用相同的方案，否則會造成其他問題的出現哦~
那麼，在我們學習以上知識後，就能清晰地知道開頭引入的問題正是父子盒子間的塌陷，我們可以通過觸發 bfc 規則（僅其中一種方案）來解決：
以上就是 css 盒子邊距常見的塌陷與解決辦法，希望能夠對你有所幫助。