html - 請教margin-top問題

問題描述

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

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

代碼演示鏈接描述

問題解答

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

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

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

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

給p和h1中間隔開就行了 p設置內邊距或者邊框