<p > <h1 style="margin-top:100px">aa</h1> </p>
有個問題不明白,1.html裡面p包裹一個h1,h1有margin-top, 為什麼h1的margin-top會撐破到p外面去,而不是在p裡面實現外邊距2.如何實現在p裡面謝謝.
程式碼示範連結描述
拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...
這問題問了好多遍了,給你個參考吧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設定內邊距或邊框
這問題問了好多遍了,給你個參考吧
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設定內邊距或邊框