外邊距合併問題常見於第乙個子元素的margin-top會頂開父元素與父元素相鄰元素的間距，而且只在標準瀏覽器下 (firffox、chrome、opera、sarfi)產生問題，ie下反而表現良好。例子可以檢視下面**(ie下表現「正常」，標準瀏覽器下檢視出現「bug」)：
效果如下圖：
解決辦法是：
給父元素加個padding或border或overflow:hidden即上面**裡的注釋部分
效果如下圖：
這個問題發生的原因是根據規範，乙個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文件流中的第乙個子元素的上邊距重疊。
再說了白點就是：父元素的第乙個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己 「領導」(父元素，祖先元素)的麻煩。只要給領導設定個有效的 border或者padding就可以有效的管制這個目無領導的margin防止它越級，假傳聖旨，把自己的margin當領導的margin執行。 對於垂直外邊距合併的解決方案上面已經解釋了，為父元素例子中的middle元素增加乙個border-top或者padding-top即可解決這個問題。
深入理解一下margin外邊距：
margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 記憶方式是元素周圍正上方順時針「上右下左」記憶。
1、如果margin只有乙個值，表示上右下左的margin同為這個值。例如：margin:10px; 就等於 margin:10px 10px 10px 10px;
2、如果 margin 只有兩個值，第乙個值表示上下margin值，第二個值為左右margin的值。例如：margin:10px 20px; 就等於 margin:10px 20px 10px 20px;
3、如果margin有三個值，第乙個值表示上margin值，第二個值表示左右margin的值，第三個值表示下margin的值。例如：margin:10px 20px 30px; 就等於 margin:10px 20px 30px 20px;
4、如果margin有四個值，那這四個值分別對應上右下左這四個margin值。例如：margin:10px 20px 30px 40px;
在實際應用中，個人不推薦使用三個值的margin，一是容易記錯，二是不容易日後修改，一開始如果寫成margin:10px 20px 30px;日後需求改動為上10px，右30px，下30px，左20px，你不得不還是得把這個margin拆開為margin:10px 30px 30px 20px;費力且不討好，不如一開始就老老實實的寫成margin:10px 20px 30px 20px;來的實在，不要為了現在節省倆個位元組而讓日後再次開發的成本上公升。
用margin還是用padding
何時應當使用margin：
需要在border外側新增空白時。
空白處不需要背景（色）時。
上下相連的兩個盒子之間的空白，需要相互抵消時。如15px + 20px的margin，將得到20px的空白。
何時應當時用padding：
需要在border內測新增空白時。
空白處需要背景（色）時。
上下相連的兩個盒子之間的空白，希望等於兩者之和時。如15px + 20px的padding，將得到35px的空白。
個人認為：margin是用來隔開元素與元素的間距；padding是用來隔開元素與內容的間隔。margin用於布局分開元素使元素與元素互不相干；padding用於元素與內容之間的間隔，讓內容（文字）與（包裹）元素之間有一段「呼吸距離」。
文章部分來自
子元素設定margin top，父元素也受影響
這個問題困惑了非常久。儘管沒有大礙早就摸出來怎麼搞定它。但始終不明確原因出在 假設僅僅是ie有問題我也不會太在意。可問題是全部上等瀏覽器都表現如此，這樣叫我怎能安心？今天總算下狠心查出來怎麼回事，竟然是css2.1盒模型規範 儘管非常彆扭，非常彆扭的規定。問題例如以下。兩層div結構。outer d...
關於子元素的margin top影響父元素
來看看這個問題 子元素為什麼設定margin top會影響父元素的margin top。先把html,body,div的預設margin，padding設為0,再給父元素設定寬高，子元素設定寬高。然後又設定子元素的margin top為20px。效果如下 查了下，簡單來說是因為父元素沒有設定padd...
子元素的margin top會影響父元素
恢復內容開始 在css2.1盒模型中 in this specification,the expression collapsing margins means that adjoining margins no non empty content,padding or border areas o...