這是Margin垂直外邊距合併問題，外邊距合併指的是，當兩個垂直外邊距相遇時，它們將形成一個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

　　垂直外邊距合併問題常見於第一個子元素的margin-top會頂開父元素與父元素相鄰元素的間距，而且只在標準瀏覽器下 (FirfFox、Chrome、Opera、Sarfi)產生問題，IE下反而表現良好。

　　這個問題發生的原因是根據規範，一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文件流中的第一個子元素的上邊距重疊。

　　再說了白點就是：父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.就會不斷一層一層的找自己 “領導”(父元素，祖先元素)的麻煩。只要給領導設定個有效的 border或者padding就可以有效的管制這個目無領導的margin防止它越級，假傳聖旨，把自己的margin當領導的margin執行。

　　對於垂直外邊距合併的解決方案上面已經解釋了，為父元素例子中的middle元素增加一個border-top或者padding-top即可解決這個問題。

來源：https://zhidao.baidu.com/question/1669253657503122107.html?word=div%E9%87%8C%E5%8C%85%E5%90%AB%E7%9A%84div%E8%AE%BE%E7%BD%AE%E4%B8%8D%E4%BA%86%E5%A4%96%E8%BE%B9%E8%B7%9D&ms=1&rid=8090324398338488204