別被上面這個名詞給嚇倒了，簡單地說，外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。你可以檢視w3shool css外邊距合併了解這個基本知識。
實際工作中，垂直外邊距合併問題常見於第乙個子元素的margin-top會頂開父元素與父元素相鄰元素的間距，而且只在標準瀏覽器下(firffox、chrome、opera、sarfi)產生問題，ie下反而表現良好。例子可以檢視下面**(ie下表現「正常」，標準瀏覽器下檢視出現「bug」)：
我其實只是想和我的父元素隔開點距離。
再說了白點就是：父元素的第乙個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己「領導」(父元素，祖先元素)的麻煩。只要給領導設定個有效的 border或者padding就可以有效的管制這個目無領導的margin防止它越級，假傳聖旨，把自己的margin當領導的margin執行。
對於垂直外邊距合併的解決方案上面已經解釋了，為父元素例子中的middle元素增加乙個border-top或者padding-top即可解決這個問題。
一般說來這個問題解釋到這裡，大多數文章就不會再深入下去了，但作為一名實戰開發者，最求的是知其然知其所以然，原本使用margin-top就是為了與父元素隔開距離，而按照你這麼乙個解法，其實是一種「修復」，為了「彌補修復」這個父子垂直外邊距合併這個css規範「bug」，而強制在父元素上使用border-top和padding-top，不舒服，也不容易記住，下次再發生這樣的情況還是會忘記這條準則，而且在頁面設計稿裡如果不需要border-top加個上邊框，這麼一加反而畫蛇添足，為以後修改留下隱患。
垂直外邊距合併問題
簡單地說，外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。實際工作中，垂直外邊距合併問題常見於第乙個子元素的margin top會頂開父元素與父元素相鄰元素的間距，而且只在標準瀏覽器下 firffox chrome ope...
CSS學習之垂直外邊距合併問題
概念 外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成乙個外邊距，合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者 注意 只有普通文件流中塊級元素 的垂直外邊距才會發生外邊距合併。行內框 浮動框或絕對定位之間的外邊距不會合併。當乙個元素包含在另乙個元素中時 假設沒有內邊距或邊框把外邊...
垂直外邊距重疊問題
當兩個盒子 兄弟元素 處於垂直狀態時,相鄰兩個外邊距不是相加,而是取最大值 當兩個元素是父子關係時,子元素的外邊距 父元素的外邊距 會傳遞給對方 解決方法1 使用文字破壞外邊距相鄰 破壞相鄰狀態 缺點 需要增加html結構 解決方法2 使用border破壞外邊距相鄰 缺點 需要維持可見框大小 解決方...