外邊距重疊就是 margin-collapse。相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以結合成一個單獨的外邊距。 這種合併外邊距的方式被稱為摺疊，結合而成的外邊距稱為摺疊外邊距

摺疊結果遵循下列計算規則：

1. 兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值

2. 兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值

3. 兩個外邊距一正一負時，摺疊結果是兩者的相加的和

    

怎麼避免外邊距摺疊（怎麼消除）來源 知乎問答:如何解決外邊距疊加的問題？

1. 浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 摺疊（注意這裡指的是上下相鄰的元素）

2. 建立了塊級格式化上下文的元素，不和它的子元素髮生 margin 摺疊（注意這裡指的是建立了BFC的元素和它的子元素不會發生摺疊。 我們都知道觸發BFC的因素是float（除了none）、overflow（除了visible）、display（table-cell/table-caption/inline-block）、position（除了static/relative） 很明顯大家可以看出來相鄰元素不發生摺疊的因素是觸發BFC因素的子集，也就是說如果我為上下相鄰的元素設定了overflow:hidden，雖然觸發了BFC，但是上下元素的上下margin還是會發生摺疊。 這個問題其實和BFC並沒有太大的關係，希望大家不要濫用BFC，要知道BFC不是全能，建立BFC的初衷只是為了讓元素本身（包括它的子元素）能夠正確的計算自己的寬高。

3. zoom，這是IE瀏覽器最初支援的縮放屬性，到現在只有最新的webkit核心的瀏覽器也支援。但只是在IE8以下的瀏覽器下才可成功觸發hasLayout，對於非IE瀏覽器也是沒有效果的，所以還是需要同樣的去建立BFC。

關於最終如何解決這樣的問題，我的建議是在寫的時候儘量用同一方向的margin，比如都設定為top或者bottom，因為你在實踐的時候有時不需要為每個元素設定浮動、inline-block或者absolute 。

參考資料

1. MDN:外邊距合併