一、写在前面
根据w3c规范，两个margin产生折叠的必备条件：
1、必须处于常规文档流（不能是浮动和定位）的块级盒子，并且处于同一个BFC当中。
2、没有线盒，没有空隙，没有padding和border将他们分割。
3、都处于垂直方向相邻的外边距。
二、例子
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
font-size: 16px;
line-height: 1;
margin-top: 10px;
margin-bottom: 15px;
}
.aa {
border-bottom: 1px solid red;
}
.bb {
border-top: 1px solid red;
}
</style>
</head>
<body>
<div>
<p class="aa">AAA</p>
<p></p>
<p></p>
<p></p>
<p class="bb">BBB</p>
</div>
</body>
</html>
经过验证，两者的距离为15px，原因如下：
1、空的p标签会重叠
2、margin-top和margin-bottom会重叠，所以距离为15px。
margin为负值时的注意事项：
1、margin-left为负值时，自身元素会向左移动。
2、margin-top为负值时，自身元素会向上移动。
3、margin-right为负值时，自身元素不受影响，但是相邻元素会向左移动。
4、margin-bottom为负值时，自身元素不受影响，但是相邻元素会向上移动。
5、position:absolute时，margin-right和margin-bottom为负值时，自身元素会受影响。
三、遇到面试题我们可以这样回答
margin重叠是指在垂直方向上，相邻的两个元素的margin会发生重叠的情况。一般来说分为以下4种情况：
3.1、相邻兄弟元素的margin-bottom和margin-top发生重叠，这时候我们可以设置其中一个元素为BFC即可解决
3.2、父元素的margin-top和子元素的margin-top发生重叠，他们发生重叠是因为这两个元素是相邻的，所以可以通过以下几种方法来解决：
1、 为父元素设置padding-top或border-top来分割他们。
2、 设置父元素为BFC。
3、父元素和第一个子元素之间添加一个内联元素来进行分割。
3.3、高度为auto的父元素的margin-bottom和最后一个子元素的margin-bottom发生重叠，他们发生重叠一个原因是他们是相邻的，另一个原因是父元素的高度是不固定的，那么可以通过以下几种方法来解决：
1、为父元素设置padding-bottom或border-bottom将他们分开。
2、 把父元素设置为BFC。
3、 父元素和最后一个子元素之间添加一个内联元素进行分割。
4、 为父元素设置一个高度，height、max-height或者min-height都可以解决
3.4、没有内容的元素，自身的margin-top和margin-bottom发生重叠，可以通过以下几种方法解决：
1、元素设置padding或border。
2、给元素设置一个高度。
