問題描述

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

問題解答

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

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

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

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

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

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

個(gè)問題。

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

父元素的css是怎樣的？

猜測(cè)是，外邊距合并問題，看這里

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

具體參考margin-collapse

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

父元素加border——