問題描述

<p > <h1 style='margin-top:100px'>aa</h1></p>

有個問題不明白,1.html里面p包裹一個h1,h1有margin-top, 為什么h1的margin-top會撐破到p外面去,而不是在p里面實(shí)現(xiàn)外邊距2.如何實(shí)現(xiàn)在p里面謝謝.

代碼演示鏈接描述

問題解答

這問題問了好多遍了，給你個參考吧MDN-外邊距塌陷外邊距折疊( Collapsing margins )

根據(jù)jasonintju的回答,我整理一下:因為我的子元素的margin-top比父元素大,所以會直接使用子元素的margin-top

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

引用:https://developer.mozilla.org...

給p和h1中間隔開就行了 p設(shè)置內(nèi)邊距或者邊框