一、写在前面
根据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、给元素设置一个高度。

如何理解margin重叠问题

相关文章

热门标签

最新文章