搜尋

首頁  >  問答  >  主體

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裡面謝謝.

程式碼示範
連結描述

高洛峰高洛峰2854 天前1997

全部回覆(3)我來回復

  • 高洛峰

    高洛峰2017-05-19 10:49:56

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

    回覆
    0
  • PHPz

    PHPz2017-05-19 10:49:56

    根據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...

    回覆
    0
  • 仅有的幸福

    仅有的幸福2017-05-19 10:49:56

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

    回覆
    0
  • 取消回覆