教育行業(yè)A股IPO第一股（股票代碼 003032）

全國(guó)咨詢/投訴熱線：400-618-4000

相鄰塊元素垂直外邊距合并的方法？

更新時(shí)間:2020年12月23日11時(shí)47分 來(lái)源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

　　
當(dāng)上下相鄰的兩個(gè)塊元素相遇時(shí)，如果上面的標(biāo)簽有下外邊距margin-bottom，下面的標(biāo)簽有上外邊距margin-top，則它們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者。這種現(xiàn)象被稱(chēng)為相鄰塊元素垂直外邊距的合并(也稱(chēng)外邊距塌陷)。

　　示例代碼如下：

　　運(yùn)行示例代碼效果如圖1所示。

1608694892986_1.gif

圖1 相鄰塊元素垂直外邊距的合并

圖1中，兩個(gè)<div>之間的垂直間距并不是第一個(gè)<div>的margin-bottom與第二個(gè)<div>的margin-top之和60px。如果用測(cè)量工具測(cè)量可以發(fā)現(xiàn)，兩者之間的垂直間距是40px，即為margin-bottom與margin-top中的較大者。


0 分享到：
和我們?cè)诰€交談！