css中外邊距的合併問題

2021-10-08 23:45:32 字數 337 閱讀 8173

1.父子級

①給父元素新增邊框屬性

②給父元素/子元素新增浮動屬性

③給父元素/子元素新增定位屬性

④給父元素設定overflow:hidden屬性(有滾動條的不要用)

⑤給父元素設定display:inline-block (子級沒用)

⑥給本應該設定給子元素的外邊距設定給父元素的內邊距(父元素的內邊距變大了,盒子就變大了)

2.兄弟級

解決:將本應該設定給兩個元素的外邊距設定給乙個元素

合併規則:①兩個均是正數時,取較大的乙個

②兩個均是負數時,取絕對值較大的乙個

③當兩個數值一正一負時,直接相加

CSS外邊距合併的問題

外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。外邊距合併 疊加 是乙個相當簡單的概念。但是,在實踐中對網頁進行布局時,它會造成許多混淆。簡單地說,外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外...

CSS外邊距合併的問題

外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。外邊距合併 疊加 是乙個相當簡單的概念。但是,在實踐中對網頁進行布局時,它會造成許多混淆。簡單地說,外邊距合併指的是,當兩個垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外...

css的外邊距合併或者外邊距塌陷問題

已知兩個寬和高均為100px,margin均為20px的div垂直排列,現象如下圖所示 當設定css1的margin bottom 40px 或者css2的margin top 40px時,現象如下圖所示 結論 只有當兩個垂直排列的盒子的垂直外邊距挨在一起時會產生合併問題,此問題也不需要解決,記住誰...