外邊距重疊就是 margin-collapse。相鄰的兩個盒子（可能是兄弟關係也可能是祖先關係）的外邊距可以結合成乙個單獨的外邊距。 這種合併外邊距的方式被稱為摺疊，結合而成的外邊距稱為摺疊外邊距摺疊結果遵循下列計算規則：
兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值
兩個相鄰的外邊距都是負數時，摺疊結果是兩者絕對值的較大值
兩個外邊距一正一負時，摺疊結果是兩者的相加的和
怎麼避免外邊距摺疊（怎麼消除）** 知乎問答:如何解決外邊距疊加的問題？
浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 摺疊（注意這裡指的是上下相鄰的元素）
建立了塊級格式化上下文的元素，不和它的子元素發生 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的初衷只是為了讓元素本身（包括它的子元素）能夠正確的計算自己的寬高。
zoom，這是ie瀏覽器最初支援的縮放屬性，到現在只有最新的webkit核心的瀏覽器也支援。但只是在ie8以下的瀏覽器下才可成功觸發haslayout，對於非ie瀏覽器也是沒有效果的，所以還是需要同樣的去建立bfc。
關於最終如何解決這樣的問題，我的建議是在寫的時候盡量用同一方向的margin，比如都設定為top或者bottom，因為你在實踐的時候有時不需要為每個元素設定浮動、inline-block或者absolute 。參考資料
mdn:外邊距合併
外邊距重疊
外邊距重疊 在css當中，相鄰的兩個盒子 可能是兄弟關係也可能是祖先關係 的外邊距可以結合成乙個單獨的外邊距。這種合併外邊距的方式被稱為摺疊，並且因而所結合成的外邊距稱為摺疊外邊距。摺疊結果遵循下列計算規則 1.兩個相鄰的外邊距都是正數時，摺疊結果是它們兩者之間較大的值。也就是說當第乙個div的ma...
外邊距的重疊
垂直外邊距的重疊 相鄰的垂直方向外邊距發生重疊現象 兄弟元素 兄弟元素間的相鄰垂直外邊距會取二者之間的較大值 二者都是正值 特殊情況 如果相鄰的外邊距一正一負，則取兩者的和 如果相鄰的外邊距都是負值，則取兩者中絕對值較大的 兄弟元素之間的外邊距的重疊，對於開發是有利的，所以我們不需要處理 第一種情況...
CSS外邊距重疊及防止方法
邊界重疊 是指兩個或多個盒子 父子或者兄弟之間 的相鄰邊界重合在一起而形成乙個單一邊界。不會發生重疊的情況 1 水平邊距不會發生重疊 2 相鄰的盒模型中，如果其中乙個是float，垂直margin不會重疊，並且浮動的盒模型和它的子元素之間也一樣 3 設定overflow 屬性的元素和它的子元素之間不...