子元素margin top為何會影響父元素？

問題如下

一段很簡單的**：

css如下：

type="text/css">

*        .show
.show
h2    
style>

class="show">

crystalh2>
div>

設定了margin-top後出現了如下所示的現象：

我們並沒有給外層的div設定margin-top，但是還是距離瀏覽器最頂部產生了50px的間距，檢視這50px間距屬於哪個元素，會發現外層div的margin依然是0 auto; 所以這個margin還是屬於h2,為什麼會這樣？

來看css2.1盒模型中規定的內容：

in this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗鄰的兩個或更多盒元素的margin將會合併為乙個margin共享之。毗鄰的定義為：同級或者巢狀的盒元素，並且它們之間沒有非空內容、padding或border分隔。

若給h2也新增乙個class，並且在.show之前定義，則最終結果如第乙個圖所示，最終margin顯示為0；

解決辦法：

1. 父級或子元素使用浮動或者絕對定位absolute

浮動或絕對定位不參與margin的摺疊

2. 父級overflow:hidden;

3. 父級設定padding（破壞非空白的摺疊條件）

4. 父級設定border

資料多數參考如下文章：

---------------------

原文：?utm_source=copy

問題如下

一段很簡單的**：

css如下：

type="text/css">

*        .show
.show
h2    
style>

class="show">

crystalh2>
div>

設定了margin-top後出現了如下所示的現象：

我們並沒有給外層的div設定margin-top，但是還是距離瀏覽器最頂部產生了50px的間距，檢視這50px間距屬於哪個元素，會發現外層div的margin依然是0 auto; 所以這個margin還是屬於h2,為什麼會這樣？

來看css2.1盒模型中規定的內容：

in this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin. 所有毗鄰的兩個或更多盒元素的margin將會合併為乙個margin共享之。毗鄰的定義為：同級或者巢狀的盒元素，並且它們之間沒有非空內容、padding或border分隔。

若給h2也新增乙個class，並且在.show之前定義，則最終結果如第乙個圖所示，最終margin顯示為0；

解決辦法：

1. 父級或子元素使用浮動或者絕對定位absolute

浮動或絕對定位不參與margin的摺疊

2. 父級overflow:hidden;

3. 父級設定padding（破壞非空白的摺疊條件）

4. 父級設定border

資料多數參考如下文章：

---------------------

原文：?utm_source=copy

子元素margin top為何會影響父元素？

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

子元素margin top為何會影響父元素？

css如下 show show h2 style html結構如下 crystalh2 div 當在 我們並沒有給外層的div設定margin top，但是還是距離瀏覽器最頂部產生了50px的間距，檢視這50px間距屬於哪個元素，會發現外層div的margin依然是0 auto 所以這個margin...

css子元素的margin top為何會影響父元素

詳細內容 這個問題困惑了很久，雖然沒有大礙早就摸出來怎麼搞定它，但始終不明白原因出在 如果只是ie有問題我也不會太在意，可問題是所有上等瀏覽器都表現如此，這樣叫我怎能安心？今天總算下狠心查出來怎麼回事，居然是css2.1盒模型規範 雖然很彆扭，非常彆扭的規定。問題如下圖，兩層div結構，outer ...