外邊距合併及塌陷

2021-08-03 00:06:40 字數 551 閱讀 2352

垂直外邊距合併指的是,當兩個不浮動的元素,它們的垂直外邊距相遇時,它們將形成乙個外邊距。合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。

給一邊外邊距設大至達到設計間距,一般設定margin-top

在兩個不浮動的盒子巢狀時候,內部的盒子設定的margin-top會加到外邊的盒子上,導致內部的盒子margin-top設定失敗

1:給父元素設padding分隔元素,而不是給子元素設margin.

2:解決外邊距塌陷和浮動高度塌陷專用css**,

使用方式:在塌陷父元素的class名內加上命名 clearfix 即可,**如下:

.clearfix

:after,.clearfix

:before

.clearfix

:after

.clearfix

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

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

外邊距塌陷 外邊距合併

1.父子塊級 元素外邊距塌陷 子元素加margin top,父元素也加margin top,如果父元素沒有設定margin top,那預設0,取的是其中最大 的值,這個效果作用父元素身上啦 原因 他倆共用乙個外邊距 解決 方法一 給父元素加 border padding 方法二 給父元素加overf...

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

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