相邻或嵌套块元素垂直外边距合并(塌陷)问题

2020.03.17 - 宅先生

    使用margin定义块元素的垂直外边距时,可能会出现外边距的合并(塌陷)问题。

    一、相邻块元素垂直外边距的合并

问题描述:当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并(也称外边距塌陷)。


解决方案:尽量给只给一个盒子添加margin值。

    二、嵌套块元素垂直外边距的合并(塌陷)

问题描述:对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,父元素的上外边距会与子元素的上外边距发生合并,合并后的外边距为两者中的较大者。


解决方案:

①可以为父元素定义上边框;

②可以为父元素定义上内边距;

③可以为父元素添加overflow: hidden;

④其他方法,比如浮动、固定、绝对定位的盒子不会有问题。

- END -

各位看官,如果你觉得文章不错,请鼓励鼓励吧~~

PHP经典概率算法

分享一段经典的概率算法,简单,而且效率非常高。

取消

您的支持,是我继续创作的动力!

扫码支持
人生百态皆无常,最是一颗感恩心

打开支付宝扫一扫,即可进行扫码打赏

所得打赏均用于域名续费、服务器租赁等维持平台正常运营的必要支出。

海报生成中...