html - 請教margin-top問題
高洛峰
高洛峰 2017-05-19 10:47:56
0
3
1936
<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教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回覆(3)
小葫芦

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

PHPzhong

根據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設定內邊距或邊框

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板