更新時間:2021-08-06 來源:黑馬程序員 瀏覽量:
使用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é)。
猜你喜歡: