文章詳情頁
html - 請教margin-top問題
瀏覽：104日期：2023-06-19 14:13:10
問題描述
<p > <h1 style='margin-top:100px'>aa</h1></p>
有個問題不明白,1.html里面p包裹一個h1,h1有margin-top, 為什么h1的margin-top會撐破到p外面去,而不是在p里面實現外邊距2.如何實現在p里面謝謝.
代碼演示鏈接描述
問題解答
回答1：這問題問了好多遍了，給你個參考吧MDN-外邊距塌陷外邊距折疊( Collapsing margins )
回答2：根據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...
回答3：給p和h1中間隔開就行了 p設置內邊距或者邊框
標簽：
HTML
相關文章：
1. python - 小白django提交數據后，沒有存儲到數據庫（查閱資料并沒有發現問題）2. mysql - jdbc的問題3. python - 編碼問題求助4. Python如何播放還存在StringIO中的MP3?5. mysql - 分庫分表、分區、讀寫分離 這些都是用在什么場景下 ，會帶來哪些效率或者其他方面的好處6. 網頁爬蟲 - Python 爬蟲中如何處理驗證碼？7. 圖片鏈接的地址怎么獲得的8. python - 我在使用pip install -r requirements.txt下載時，為什么部分能下載，部分不能下載9. Python爬蟲如何爬取span和span中間的內容并分別存入字典里？10. mysql - 如何減少使用或者不用LEFT JOIN查詢？
排行榜
網公網安備