問題描述

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

問題解答

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

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

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

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

有效的管制這個目無領(lǐng)導(dǎo)的margin防止它越級，假傳圣旨，把自己的margin當(dāng)領(lǐng)導(dǎo)的margin執(zhí)行。對于垂直外邊距

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

個問題。

詳細的內(nèi)容參考博文：http://www.cnblogs.com/az96/p...

父元素的css是怎樣的？

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

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

具體參考margin-collapse

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

父元素加border——