margin是一个设置元素外边距的属性

• 块级元素垂直方向的外边距会合并，也就是margin-top和上面元素的margin-bottom会合并
• 行内元素实际上是不占有外边距的，所以行内元素外边距不会合并
• 浮动元素的外边距也不会合并

根据w3c规范，两个margin产生折叠的必备条件：

1. 必须处于常规文档流（不能是浮动和定位）的块级盒子，并且处于同一个BFC当中
2. 没有线盒，没有空隙，没有padding和border将他们分割
3. 都处于垂直方向相邻的外边距

js复制代码    // 如下代码，AAA和BBB之间的距离是多少
    <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>
    <p class="aa">AAA</p>
    <p></p>
    <p></p>
    <p></p>
    <p class="bb">BBB</p>

经过验证，两者的距离为15px，原因如下：

1. 空的p标签会重叠
2. margin-top和margin-bottom会重叠，所以距离为15px margin为负值时的注意事项：
3. margin-left为负值时，自身元素会向左移动
4. margin-top为负值时，自身元素会向上移动
5. margin-right为负值时，自身元素不受影响，但是相邻元素会向左移动
6. margin-bottom为负值时，自身元素不受影响，但是相邻元素会向上移动
7. position:absolute时，margin-right和margin-bottom为负值时，自身元素会受影响

那么遇到这样的面试题我们可以做如下回答:

margin重叠是指在垂直方向上，相邻的两个元素的margin会发生重叠的情况。一般来说分为以下4种情况：

1. 相邻兄弟元素的margin-bottom和margin-top发生重叠，这时候我们可以设置其中一个元素为BFC即可解决
2. 父元素的margin-top和子元素的margin-top发生重叠，他们发生重叠是因为这两个元素是相邻的，所以可以通过以下几种方法来解决： css复制代码 为父元素设置padding-top或border-top来分割他们 复制代码 设置父元素为BFC 复制代码 父元素和第一个子元素之间添加一个内联元素来进行分割
3. 高度为auto的父元素的margin-bottom和最后一个子元素的margin-bottom发生重叠，他们发生重叠一个原因是他们是相邻的，另一个原因是父元素的高度是不固定的，那么可以通过以下几种方法来解决： css复制代码 为父元素设置padding-bottom或border-bottom将他们分开 arduino复制代码 为父元素设置一个高度，height、max-height或者min-height都可以解决 复制代码 把父元素设置为BFC 复制代码 父元素和最后一个子元素之间添加一个内联元素进行分割
4. 没有内容的元素，自身的margin-top和margin-bottom发生重叠，可以通过以下几种方法解决： css复制代码 为元素设置padding或border 复制代码 为元素添加一个高度

作者：xiaomomo
链接：https://juejin.cn/post/7033349421731741727