今天同事遇到了乙個很奇怪的問題。
簡化來看，最初的原因是這樣的：
上**：
style="background:black;width:300px;height:300px;">就像下面這樣：style="background:blue;width:200px;height:200px;">
style="background:pink;width:100px;height:100px;">
div>
div>
div>
body>
html>這裡寫了三個互相巢狀的div，這很尋常，它現在的效果是這樣的：
現在他本來想讓粉色的div距離頂部有乙個距離，也就是想要這樣乙個效果：
所以他給粉色的div加入了上邊距和左右邊距：margin:100px auto
style="background:black;width:300px;height:300px;">
style="background:blue;width:200px;height:200px;">
style="background:pink;width:100px;height:100px;margin:100px auto;">
div>
div>
div>
body>
html>然後事情就開始變得奇妙了，他發現不光粉色的div下移了100畫素，甚至所有的div都下移了。
這個時候，我們都感覺很惶恐，感覺像是其他地方搞錯了什麼，我們花了大約半個小時的時間在各種瀏覽器上除錯，開關各種屬性，都是同樣的結果。
直到我做了這個小實驗，才發現css的這個特性。
我也很驚訝，我也寫過很多的頁面，居然從來都沒有遇到過這樣的問題。
後來查過資料才發現這個問題叫做「css外邊距疊加的問題」
詳情可以檢視：
和大概就是要給被影響的元素加上display:inline-block屬性
把他們變成行內塊就好了。
就像這樣：
style="background:black;width:300px;height:300px;">
style="background:blue;width:200px;height:200px;display:inline-block">
style="background:pink;width:100px;height:100px;margin:100px auto;">
div>
div>
div>
body>
html>這個達到了他想要的結果。
簡單地說，外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
當乙個元素出現在另乙個元素上面時，第乙個元素的下外邊距與第二個元素的上外邊距會發生合併。請看下圖：
當乙個元素包含在另乙個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合併。請看下圖：
儘管看上去有些奇怪，但是外邊距甚至可以與自身發生合併。
假設有乙個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合併：
如果這個外邊距遇到另乙個元素的外邊距，它還會發生合併：
這就是一系列的段落元素占用空間非常小的原因，因為它們的所有外邊距都合併到一起，形成了乙個小的外邊距。
外邊距合併初看上去可能有點奇怪，但是實際上，它是有意義的。以由幾個段落組成的典型文字頁面為例。第乙個段落上面的空間等於段落的上外邊距。如果沒有外邊距合併，後續所有段落之間的外邊距都將是相鄰上外邊距和下外邊距的和。這意味著段落之間的空間是頁面頂部的兩倍。如果發生外邊距合併，段落之間的上外邊距和下外邊距就合併在一起，這樣各處的距離就一致了。
另外，只有普通文件流中塊框的垂直外邊距才會發生外邊距合併。行內框、浮動框或絕對定位之間的外邊距不會合併
防止外邊距重疊解決方案：
雖然外邊距的重疊有其一定的意義，但有時候我們在設計上卻不想讓元素之間產生重疊，那麼可以有如下幾個建議可供參考：
以上建議可根據實際情況來採取。
CSS外邊距疊加問題
css外邊距疊加就是margin collapse，邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距,水平邊 距永遠不會重合。重疊結果計算規則 兩個相鄰的外邊距都是正數時，摺疊結果是它們兩個之間較大的值.兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值.兩個邊距一正一負時，摺疊結...
CSS外邊距疊加
盒模型概念 盒模型是css的基石之一，它指定元素如何顯示及 在某種程度上 如何相互互動。頁面上的每乙個元素都被看做乙個矩形框，這個框右元素的內容 內邊距 邊框和外邊距組成，如下圖 如果給元素新增背景，背景會應用於內容和內邊距組成的區域。新增邊框會在內邊距的區域外加一條線。外邊距是透明的，一般使用它控...
CSS外邊距疊加
外邊距疊加發生在上下外邊距之間，左右外邊距不會發生疊加的情況 疊加之後的外邊距高度等於發生疊加之前兩個外邊距中的最大值 外邊距疊加有三種情況 1 同級元素之間 當乙個元素出現另乙個元素的上面的時候，第乙個元素的下邊距會和將會與第二元素的上邊距會發生合併 2 父子元素之間 父元素與子元素之間的上下外邊...