問題描述

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

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

代碼演示鏈接描述

問題解答

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

根據(jù)jasonintju的回答,我整理一下:因?yàn)槲业淖釉氐膍argin-top比父元素大,所以會(huì)直接使用子元素的margin-top

塊級(jí)父元素與其第一個(gè)/最后一個(gè)子元素如果塊級(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)象。

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

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