這個問題發生的原因是根據規范,一個盒子如果沒有上補白(padding-top),那么這個盒子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。
再說了白點就是:父元素的第一個子元素的上邊距margin-top如果碰不到有效的padding.就會不斷一層一層的找自己 “領導”(父元素,祖先元素)的麻煩。只要給領導設置個有效的padding就可以有效的管制這個目無領導的margin防止它越級,假傳圣旨,把自己的margin當領導的margin執行。 對于垂直外邊距合并的解決方案上面已經解釋了,為父元素例子中的middle元素增加一個padding-top或者最上方的子元素使用padding代替margin即可解決這個問題。