外邊距塌陷 外邊距合併

2022-08-17 08:06:13 字數 398 閱讀 4513

1.父子塊級 元素外邊距塌陷

子元素加margin­top,父元素也加margin­top, 如果父元素沒有設定margin­top,那預設0,取的是其中最大

的值,這個效果作用父元素身上啦 , 原因 :他倆共用乙個外邊距 .

解決 :

方法一 : 給父元素加 border/padding 

方法二: 給父元素加overflow:hidden , (觸發bfc,它是一塊獨立的渲染區,不受子元素的影響)

2. 相鄰塊元素垂直外邊距的塌陷

給上盒子加margin­bottom,給下面盒子加margin­top, 就會出現外邊距塌陷,原因:它倆共用乙個外邊距 ,取的是他倆之間最大的值

解決 : 給任意乙個盒子加父元素, 給父元素設定 : overflow:hidden

外邊距合併(外邊距塌陷)

使用margin定義塊元素的垂直外邊距時,可能會出現外邊距的合併。當上下相鄰的兩個塊元素相遇時,如果上面的元素有下外邊距margin bottom,下面的元素有上外邊距margin top,則他們之間的垂直間距不是margin bottom與margin top之和,而是兩者中的較大者。這種現象被稱...

外邊距合併及塌陷

垂直外邊距合併指的是,當兩個不浮動的元素,它們的垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。給一邊外邊距設大至達到設計間距,一般設定margin top 在兩個不浮動的盒子巢狀時候,內部的盒子設定的margin top會加到外邊的盒子上,導致...

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

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