CSS 外邊距合併問題要點

2021-10-09 03:18:12 字數 583 閱讀 3084

使用margin定義塊元素的垂直外邊距時可能會出現外邊距的合併

1、相鄰塊元素垂直外邊距的合併

(1)、當上下相鄰的兩個元素相遇時,如果上面的元素有下外邊距(margin-bottom)

(2)、當下面的元素有上外邊距(margin-top),則他們之間的垂直間距不是margin-bottom和margin-top之和

(3)、取兩個值中較大者這種現象被稱之為相鄰塊元素垂直外邊距的合併(也稱為外邊距塌陷)

2、巢狀塊元素垂直外邊距的合併(塌陷)

(1)、對於兩個巢狀關係的塊元素,如果父元素沒有上內邊距及邊框

(2)、父元素的上外邊距會與子元素的上外邊距發生合併

(3)、合併後的外邊距為兩者中的較大者

解決方案:

(1)、可以為父元素定義上邊框(border-top:1px solid transparent)

(2)、可以為父元素定義上內邊距(padding-top:1px)

(3)、可以為父元素新增overflow:hidden;

還有其他方法,比如浮動、固定、絕對定位的盒子不會有問題。

CSS 外邊距合併

做了個div 巢狀div的實驗,父div和子div都有margin邊距 發現margin top 10px 根本不起作用,後來發現是外邊框合併問題,他會合併取兩者大的邊距,如果子div的邊距是30px 那麼父子div還是會貼著 只是,父div外邊距會變成30的效果 外邊距合併指的是,當兩個垂直外邊距...

CSS外邊距合併

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

CSS 外邊距合併

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