下文大部分內容為從mdn margin collapsing拷貝貼上，然後加上解釋。
塊級元素的上外邊距和下外邊距有時會合併（或摺疊）為乙個外邊距，其大小取其中的最大者，這種行為稱為外邊距摺疊（margin collapsing），有時也翻譯為外邊距合併。注意浮動元素和絕對定位元素的外邊距不會摺疊。毗鄰的兩個元素之間的外邊距會摺疊（除非後乙個元素需要清除之前的浮動）。
塊格式化上下文
塊格式化上下文（block formatting context，bfc） 是web頁面的視覺化css渲染的一部分，是塊盒子的布局過程發生的區域，也是浮動元素與其他元素互動的區域
清除浮動
複製**"margin: 100px;">
// margin-top + margin-bottom=100px;
複製**
上述情況的組合會產生更複雜的外邊距摺疊。
"margin-top: -100px">
"margin-top: -50px">
"margin-top: 200px">this is a paragraph
最終結果為：200px + (-100px) = 100px;
複製**
"margin-top: -100px">
"margin-top: -50px">
"margin-top: -200px">this is a paragraph
最終結果為：-200px;
複製**
"visibility: hidden;">12
"margin-top: 20px;">this is p.
or給父元素加padding/border等，總之逆著合併條件來。（border: 0等於沒設定啊）
複製**
外邊距合併（外邊距塌陷）
使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合併。當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin bottom，下面的元素有上外邊距margin top，則他們之間的垂直間距不是margin bottom與margin top之和，而是兩者中的較大者。這種現象被稱...
外邊距塌陷 外邊距合併
1.父子塊級 元素外邊距塌陷 子元素加margin top,父元素也加margin top,如果父元素沒有設定margin top,那預設0,取的是其中最大 的值,這個效果作用父元素身上啦 原因 他倆共用乙個外邊距 解決 方法一 給父元素加 border padding 方法二 給父元素加overf...
外邊距合併
從3個簡單的小例子來看外邊距合併 給h1加50px的margin，但實際上h1和div的margin合併在一起了 detail設定margin為30px,header設定margin為30px，結果兩個相鄰元素之間的間距發生了合併 而且合併寬度是margin數值大的為準。如下圖detail和head...