兩個或多個毗鄰的普通流中的塊元素垂直方向上的margin會摺疊
注意一點，在沒有被分隔開的情況下，乙個元素的 margin-top 會和它普通流中的第乙個子元素（非浮動元素等）的 margin-top 相鄰；只有在乙個元素的 height 是 "auto" 的情況下，它的 margin-bottom 才會和它普通流中的最後乙個子元素（非浮動元素等）的 margin-bottom 相鄰。
1）參與摺疊的 margin 都是正值：取其中 margin 較大的值為最終 margin 值
2）參與摺疊的 margin 都是負值：取的是其中絕對值較大的，然後，從 0 位置，負向位移
3）參與摺疊的 margin 中有正值，有負值：先取出負 margin 中絕對值最大的，然後，和正 margin 值中最大的 margin 相加
1）相鄰的 margin 要一起參與計算，不得分步計算
要注意，相鄰的元素不一定非要是兄弟節點，父子節點也可以，即使不是兄弟父子節點也可以相鄰。
看以下示例：
a
b
錯誤的計算方式： 先算 a 和其父元素以及其父元素的父元素的摺疊，這個值算出來之後，應該是90px，依此法算出 b 的為80px，然後，a 和 b 摺疊，margin為90px。
請注意，多個 margin 相鄰摺疊成乙個 margin，計算的時候，應該取所有相關的值一起計算，而不能分開分步來算。
以上例子中，a 和 b 之間的 margin 摺疊產生的 margin，是 6 個相鄰 margin 摺疊的結果，將其 margin 值分為兩組：
根據有正有負時的計算規則，正值的最大值為200px，負值中絕對值最大的是-120px，所以，最終摺疊後的 margin 應該是 200 + (-120) = 80px
2）元素自身的 margin-bottom 和 margin-top 相鄰時也會摺疊
自身 margin-bottom 和 margin-top 相鄰，只能是自身內容為空，垂直方向上 border、padding 為0
3）浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 摺疊，即使和它相鄰的子元素也不會發生摺疊。
4）建立了塊級格式化上下文的元素，不和它的子元素發生 margin 摺疊
CSS外邊距摺疊問題
毗鄰的兩個或多個margin會合併成乙個margin，叫做外邊距摺疊，也叫外邊距合併。如果你還是不懂請參照 css 外邊距合併 兩點 1 摺疊只會發生在垂直方向 2 合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。摺疊規則 避免外邊距摺疊 type text css body div1...
解決 外邊距摺疊問題
當兩個元素垂直相鄰時，如果兩個元素分別向同一方向設定了各自的外邊距，那麼會產生合併，取其中最大正值。如果其中乙個元素是負的呢？答案 正值 負值 得 正值 如果兩個元素都是負值呢？答案 負值 負值 得 負值 總結 1.如果存在負值，會是減法 2.如果是正值，則直接取大值 博主建議 上面的了解一下就行，...
CSS之外邊距摺疊
collapsing margins，即外邊距摺疊，指的是毗鄰的兩個或多個外邊距 margin 會合併成乙個外邊距。其中所說的 margin 毗鄰，可以歸結為以下兩點 兩個或多個 說明其數量必須是大於乙個，又說明，摺疊是元素與元素間相互的行為，不存在 a 和 b 摺疊，b 沒有和 a 摺疊的現象。毗...