塊級元素的垂直相鄰外邊距會合並，水平邊距永遠不會重合。

行內元素實際上不占上下外邊距，左右外邊距也不會合並。浮動元素的外邊距也不會合並。

外邊距重疊的意義

外邊距的重疊只產生在普通流文檔的上下外邊距之間，這個看起來有點奇怪的規則，其實有其現實意義。設想，當我們上下排列一系列規則的塊級元素（如段落P）時，那麽塊元素之間因為外邊距重疊的存在，段落之間就不會產生雙倍的距離。

外邊距(margin)重疊示例

外邊距重疊是指兩個垂直相鄰的塊級元素，當上下兩個邊距相遇時，起外邊距會產生重疊現象，且重疊後的外邊距，等於其中較大者。
圖示：

另一個重疊現象是當一個元素包含在另一個元素之中時，子元素與父元素之間也會產生重疊現象，重疊後的外邊距，等於其中最大者：

垂直相鄰margin值計算方法如下：

a、全部都為正值，取最大者；

b、不全是正值，則都取絕對值，然後用正值減去最大值；

c、沒有正值，則都取絕對值，然後用0減去最大值。

解決方案：

1. 外層元素 overflow:hidden;

2. 外層元素加【padding】 代替。寬度等於外邊距值padding-bottom:50px;（有時候不合適）

3. 內層元素加【絕對定位】 postion:absolute;（缺點：改變了位置）

4. 內層元素加【float:left;】或【display:inline-block;】（缺點：改變了位置）

5. 內層元素加【padding】。寬度等於外邊距值padding-top:50px;（有時候不合適）

6. 內層元素加【透明邊框】 代替。邊框寬度等於外邊距值 border-top:50px solid transparent;（缺點：如果有背景顏色，看起來就像改變了大小）

垂直相鄰margin合並解決方法