首頁技術文章正文

margin塌陷及解決方法【CSS教程】

更新時間:2021年08月06日17時00分來源:傳智教育瀏覽次數:

好口碑IT培訓

使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合并，也叫“margin塌陷”。margin塌陷分為兩種情況，下面我們分別介紹。

(1) 相鄰塊元素垂直外邊距塌陷

·當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom

·下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和

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

margin塌陷01

解決方案：盡量給只給一個盒子添加margin值。

(2) 嵌套塊元素垂直外邊距的塌陷

·對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及邊框

·父元素的上外邊距會與子元素的上外邊距發(fā)生合并

·合并后的外邊距為兩者中的較大者

margin塌陷02

解決方案：

·可以為父元素定義上邊框。

·可以為父元素定義上內邊距

·可以為父元素添加overflow:hidden。

還有其他方法，比如浮動、固定、絕對定位的盒子不會有問題，后面咱們再總結。

猜你喜歡：

CSS選擇器用法大全

最新資訊