外边距合并

一：外边距合并的场景

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

1、父子合并

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

clipboard.png

2、相邻元素合并

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

clipboard.png

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

clipboard.png

3、自己和自己合并

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

clipboard.png

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

1、给父元素加border

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

clipboard.png

2、给父元素加上padding

clipboard.png

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

3、形成一个BFC

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

clipboard.png

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

clipboard.png

demo