margin塌陷與合并問(wèn)題怎么解決？

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

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

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

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

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

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

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

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

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

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

解決方案：

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

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

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

還有其他方法，比如浮動(dòng)、固定、絕對(duì)定位的盒子不會(huì)有問(wèn)題，后面咱們?cè)倏偨Y(jié)。

猜你喜歡：

CSS動(dòng)畫(huà)和JS動(dòng)畫(huà)有什么區(qū)別？

CSS是什么意思？CSS的全稱(chēng)是什么？

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

Css中如何清理浮動(dòng)？

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

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