從3個簡單的小例子來看外邊距合併：
給h1加50px的margin，但實際上h1和div的margin合併在一起了
detail設定margin為30px,header設定margin為30px，結果兩個相鄰元素之間的間距發生了合併
而且合併寬度是margin數值大的為準。如下圖detail和header外邊距合併之後，邊距為50px。
當元素內容為空時，元素設定的上下margin會自己和自己合併。如下面這個例子中，footer為空，設定了上下margin為30px，但實際上footer的間隔只是30px，自己的上下margin合併了。
如下圖給header加上border之後，h1和header就沒有產生外邊距合併了。
注意：相鄰元素合併加padding和border都沒有用
給header加了乙個overflow：hidden，形成乙個bfc，外邊距就不再合併。
但是***時overflow：hidden是有作用，如果有二級選單就會被隱藏。
當然其他形成bfc的方法也可以生效，但也有對應的***。
如用float：left，寬度會收縮。需要設定寬度為100%
外邊距合併（外邊距塌陷）
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin bottom，下面的元素有上外邊距margin top，則他們之間的垂直間距不是margin bottom與margin top之和，而是兩者中的較大者。這種現象被稱...
外邊距塌陷 外邊距合併
1.父子塊級 元素外邊距塌陷 子元素加margin top,父元素也加margin top,如果父元素沒有設定margin top,那預設0,取的是其中最大 的值,這個效果作用父元素身上啦 原因 他倆共用乙個外邊距 解決 方法一 給父元素加 border padding 方法二 給父元素加overf...
外邊距合併
下文大部分內容為從mdn margin collapsing拷貝貼上，然後加上解釋。塊級元素的上外邊距和下外邊距有時會合併 或摺疊 為乙個外邊距，其大小取其中的最大者，這種行為稱為外邊距摺疊 margin collapsing 有時也翻譯為外邊距合併。注意浮動元素和絕對定位元素的外邊距不會摺疊。毗鄰...