外边距合并

一:外边距合并的场景

从3个简单的小例子来看外边距合并:

1、父子合并

给h1加50px的margin,但实际上h1和div的margin合并在一起了

2、相邻元素合并

detail设置margin为30px,header设置margin为30px,结果两个相邻元素之间的间距发生了合并

而且合并宽度是margin数值大的为准。如下图detail和header外边距合并之后,边距为50px。

3、自己和自己合并

当元素内容为空时,元素设置的上下margin会自己和自己合并。如下面这个例子中,footer为空,设置了上下margin为30px,但实际上footer的间隔只是30px,自己的上下margin合并了。

二、阻止外边距合并的方法

1、给父元素加border

如下图给header加上border之后,h1和header就没有产生外边距合并了。

2、给父元素加上padding

注意:相邻元素合并加padding和border都没有用

3、形成一个BFC

给header加了一个overflow:hidden,形成一个BFC,外边距就不再合并。 但是副作用时overflow:hidden是有作用,如果有二级菜单就会被隐藏。

当然其他形成BFC的方法也可以生效,但也有对应的副作用。 如用float:left,宽度会收缩。需要设置宽度为100%

demo

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券