margin塌陷與合并問題怎么解決？

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

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

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

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

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

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

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

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

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

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

解決方案：

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

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

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

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

猜你喜歡：

CSS動畫和JS動畫有什么區(qū)別？

CSS是什么意思？CSS的全稱是什么？

什么是CSS選擇器？如何使用？

Css中如何清理浮動？

常用css樣式大全[2020最新整理版]

黑馬程序員web前端開發(fā)培訓(xùn)課程