2023年10月28日 11:25:38
問題如下
一段很簡單的**：
css如下：
*
.show
.show h2
style>
crystalh2>
div>
margin-top時，瀏覽器顯示如預期
設定了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分隔。因為巢狀也屬於毗鄰，所以在樣式表中優先順序更高的
.show h2的margin覆蓋了之前外層div定義的margin，導致最終整個div產生10px的間距。
若給h2也新增乙個class，並且在.show之前定義，則最終結果如第乙個圖所示，最終margin顯示為0；
解決辦法：
1. 父級或子元素使用浮動或者絕對定位absolute
浮動或絕對定位不參與margin的摺疊
2. 父級overflow:hidden;
3. 父級設定padding（破壞非空白的摺疊條件）
4. 父級設定border
子元素margin top為何會影響父元素？
問題如下 一段很簡單的 css如下 type text css show show h2 style html結構如下 class show crystalh2 div 當在沒有設定margin top時，瀏覽器顯示如預期 設定了margin top後出現了如下所示的現象 我們並沒有給外層的div設...
子元素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 ...