垂直外边距重叠问题解决
什么是垂直外边距重叠
所谓垂直外边距重叠就是在网页中垂直方向的相邻外边距会发生重叠
我们看其中一种情况，两个div是兄弟元素的情况
在这里我设置了上面div的margin-bottom为100px,此时这种现象很正常，但是如果我再给下面这一个红色的div设置一个margin-top为100px，会发生什么呢？（如下图）
此时我们会发现两个div之间的间距竟然还是原来的样子（和上图一样），而没有改变，如果margin-top设置为200px呢？（如下图）
我们会发现他们的间距变为两百了，为什么当一个下外边距为100px，另一个上外边距也是100px，它们边距仍然是100px，这是因为它们两个发生了垂直外边距重叠问题，因此它们两个的距离将会是它们两个外边距的最大值，这也是为什么当下面的div的上外边距改为200px，它们的间距就变为200px的原因。
解决方法（我们想让它们是相加而不是取最大值）
思路：既然它是说垂直相邻，那么我们是不是只要让它们不相邻是不是就可以了！
解决方法：
1在两个块级元素之间加一个字母（副作用很明显）
所以一般我们是直接取最大值来达到我们的需求，而不使用这种方法
第二种情况（父子元素之间）
这种情况我们会发现我们想让box2在box1中向下移动100px，但是实际效果是这个margin-top传递给了它的父元素也就是box1，这也就是垂直外边距重叠带来的问题：子元素的外边距会传递给父元素。
解决方法
思路还是一样的
1:根据盒子模型我们可以轻易得出第一种方法：给box1加一个border-top
因为这样这个border就会隔开两个box（效果如下）
方法2给box1设置一个padding-top(也是根据盒子模型分析)
方法3：给box1加一个before伪类，并设置它的display为table并且content为空字符串（推荐）
619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
