關於子元素的margin top影響父元素

2021-07-27 21:59:47 字數 632 閱讀 1510

來看看這個問題「子元素為什麼設定margin-top會影響父元素的margin-top。

先把html,body,div的預設margin,padding設為0,。

再給父元素設定寬高,子元素設定寬高。

然後又設定子元素的margin-top為20px。

效果如下

查了下,簡單來說是因為父元素沒有設定padding或者border時,第乙個子元素會和父元素的margin-top重疊(w3c就這麼規定滴,不用疑問為什麼會這麼做)。

解決方法就是

父元素設定padding

或者父元素設定border

或者父元素設定overflow

解決了^_^之前沒遇到是因為這幾個屬性太常見了,設定的比較頻繁...所以之前沒遇到。

子元素的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影響父元素的解決辦法

在子元素設定margin top,有時會帶著父元素一起移動。原因 outer div margin 0 auto inner div margin top 10px 根據css2.1盒模型規範,兩層div結構,outer div屬性為 margin 0 auto 本該緊貼外框頂部的,如果沒有inne...

子元素的margin top與父元素合併的問題

問題集 整理自網路 貌似這個 collapsing margins 的問題由來已久啊!一般解釋是 2個或以上盒模型之間 關係可以是相鄰或巢狀 相鄰的margin屬性 這之間不能有非空內容 padding區域 border邊框或使用清除分離方法 結合表示為乙個單獨的margin。w3school是這麼...