子元素設定margin會影響父元素問題

2021-10-02 08:12:27 字數 1296 閱讀 9949

參考：

給子元素設定的margin結果作用在父元素身上，類似於「越級偽命令」

問題的解決辦法有三種

1、為父元素設定padding。


2、為父元素設定border。


3、為父元素設定 overflow: hidden 。
如果子元素不是div,p,h1等塊級標籤，而是a,span等行內標籤的話，則不會出現margin擊穿問題。此外，如果父元素和子元素之間還有別的內容，即html**如下所示的話也不會導致margin擊穿問題。

例如（react中）

這樣子元素設定margin會設定給父元素

import react from


'react'


;import


;//引入元件


import header from


'../component/header/header.js'


;import bodycontent from


'../component/body/body.js'


;function()


<


/header>


<


/bodycontent>


<


/div>);


}export
習慣給父元素加透明邊框後解決

2. 父元素和子元素之間有內容

import react from


'react'


;import


;//引入元件


子元素的margin top會影響父元素
恢復內容開始 在css2.1盒模型中 in this specification,the expression collapsing margins means that adjoining margins no non empty content,padding or border areas o...


子元素margin top為何會影響父元素？
問題如下 一段很簡單的 css如下 type text css show show h2 style html結構如下 class show crystalh2 div 當在沒有設定margin top時，瀏覽器顯示如預期 設定了margin top後出現了如下所示的現象 我們並沒有給外層的div設...


子元素margin top為何會影響父元素？
2016年10月28日 11 25 38 問題如下 一段很簡單的 css如下 show show h2 style html結構如下 crystalh2 div 當在沒有設定margin top時，瀏覽器顯示如預期 設定了margin top後出現了如下所示的現象 我們並沒有給外層的div設定mar...