首頁技術(shù)文章正文

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

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

好口碑IT培訓(xùn)

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

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

·當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)，如果上面的元素有下外邊距margin-bottom

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

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

margin塌陷01

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

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

·對于兩個(gè)嵌套關(guān)系的塊元素，如果父元素沒有上內(nèi)邊距及邊框

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

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

margin塌陷02

解決方案：

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

·可以為父元素定義上內(nèi)邊距

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

還有其他方法，比如浮動(dòng)、固定、絕對定位的盒子不會(huì)有問題，后面咱們再總結(jié)。

猜你喜歡：

CSS選擇器用法大全

最新資訊