我们在给div设置margin属性的时候，会出现margin 合并的问题。

Q：什么是margin合并呢？

A：我们可以根据一个具体的例子来看一下。

兄弟之间的合并：

比如我这里给 child1 和 child2这两个兄弟div 都设置了margin 属性，按理来说，两者之间的间距应该是 60px 才对。

但是打开F12一查发现，竟然是30px。 也就是两者之间设置的间距其实是合并起来的。

Q：那我要怎么才能解决这种兄弟之间margin 合并的问题呢？

A：只要给这两个兄弟div 的其中一个或者两个设置成 display:inline-block 这个属性，那么就不会出现这种margin合并的问题了。

父母与孩子之间的合并：

这种情况就是，孩子的margin和父母的margin合并了，本来父母设置了 margin:15px 这个属性，再加上child所设置的30px 的marigin ，相加应该是45px 的间距了，但是事实却是，最终只显示了30px，也就是child 的margin，感觉父母的margin:15px 就被覆盖掉了。

注意：无论是哪种类型的合并，都是只有上下的margin会合并，左右的是不会被合并的。

Q：那我要怎么才能解决这种父母和孩子之间margin合并呢？

A：

方法1：给父母设置一个border属性。

方法2：把border-top 改为padding-top 也行。

其实就是强行在parent 和child 之间加上点东西，你加上了 东西之后，你总不能把我中间的东西给合并掉吧。

方法3：给父元素设置一个 overflow:hidden 的属性。