多個段落為了美觀，瀏覽器會將它們的垂直距離變得統一，這是一種很常見的現象，在規範中這種現象正式名稱叫做：
collapsing-margins
（margin合併） 。
margin合併的發生要求很多必要的條件：
1. 水平margin不會合併。
2. 兩個上下渲染相鄰（不一定是兄弟節點）的塊狀元素在正常頁面流情況下會發生 margin 合併。
3. 浮動元素不會和任何元素（包括子孫節點）發生 margin 合併。
4. overflow！=visible的元素不和任何元素發生margin合併。
5. 絕對定位的元素不和任何元素發生margin合併。
6. inline-block 的元素不和任何元素發生margin合併。
7. 設定 clear 屬性的元素不和任何元素發生margin合併。
8. 根元素不和任何元素發生margin合併。
9. 父節點和第乙個子節點發生margin-top合併。
10. 如果最後乙個子節點沒有border以及padding，則和其父節點發生margin-bottom合併。
除了標準，還得注意 ie ，特別是 haslayout 對於 margin 合併也有影響，從而也造成了包含的絕對定位元素的位置差異。
詳見：
1.ie6,7 haslayout 對 margin 合併的影響
2.ie6,7的進一步測試
3.ie6,7 margin 合併差異對於內部絕對定位元素的位置影響
margin塌陷 margin合併
原理 父子巢狀元素在垂直方向的margin,父子元素是結合在一起的,他們兩個的margi會取其中最大的值。正常情況下,父級元素應該相對瀏覽器進行定位,子級相對父級定位。但由於margin的塌陷,父級相對瀏覽器定位.而子級沒有相對父級定位,子級相對父級,就像坍塌了一樣。原理 兩個兄弟結構的元素在垂直方...
margin塌陷以 及 margin合併
3.乙個空元素，沒有border和padding 3.margin合併解決方法 總結 margin 合併就是，當兩個垂直margin相遇時，它們將形成乙個margin。合併的margin等於兩個發生合併的margin中的較大者。合併條件 注意 普通文件流中塊級元素 垂直margin 沒有border...
margin 合併問題
塊級元素的上外邊距 margin top 和下邊外距 margin bottom 有時會合併為單個外邊距，這樣的現象稱為 margin合併 從此定義上，我們可以捕獲以下兩點重要資訊 塊級元素，但不包括浮動和絕對定位元素，儘管浮動和絕對定位可以讓元素塊狀化。只發生在垂直方向上，嚴格來說，是只發生在和當...