問題描述

p.inside是父元素,h2是其子元素，h2設置了margin-top：20px;第一張圖片的藍色區域，就是父元素的高度，但是從第二張圖片可以看出，父元素的高度沒有包裹子元素的margin-top,這是為什么啊？

問題解答

這個問題發生的原因是根據規范：一個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那么這個盒

子的上邊距會和其內部文檔流中的第一個子元素的上邊距重疊。

再說了白點就是：父元素的第一個子元素的上邊距margin-top如果碰不到有效的border或者padding.

就會不斷一層一層的找自己“領導”(父元素，祖先元素)的麻煩。只要給領導設置個有效的border或者padding就可以

有效的管制這個目無領導的margin防止它越級，假傳圣旨，把自己的margin當領導的margin執行。對于垂直外邊距

合并的解決方案上面已經解釋了，為父元素例子中的middle元素增加一個border-top或者padding-top即可解決這

個問題。

詳細的內容參考博文：http://www.cnblogs.com/az96/p...

父元素的css是怎樣的？

猜測是，外邊距合并問題，看這里

如果塊級父元素中，不存在上邊框、上內補、inline content、 清除浮動 這四條屬性（對于上邊框和上內補，也可以說，當上邊距及上內補寬度為0時），那么這個塊級元素和其第一個子元素的上邊距就可以說”挨到了一起“。此時這個塊級父元素和其第一個子元素就會發生 上外邊距合并 現象，換句話說，此時這個父元素對外展現出來的外邊距將直接變成這個父元素和其第一個子元素的margin-top的較大者。類似的，若塊級父元素的 margin-bottom 與它的最后一個子元素的margin-bottom 之間沒有父元素的 border、padding、inline content、height、min-height、 max-height 分隔時，就會發生 下外邊距合并 現象。

具體參考margin-collapse

要想解決這個問題，最簡單的方式是給父元素加上border/padding值。如圖：父元素沒有加border——

父元素加border——