margin合并

两个相邻元素如果处于同一个BFC中，那么它们就会发生margin合并。
代码举例

<body>
  <div class="box">
    <div class="box-1">
      <div class="box-2"></div>
    </div>
  </div>
</body>

.box{
  border: 1px solid;
  padding: 0;
}
.box-1{
  width: 200px;
  height: 200px;
  background: red;
  margin: 50px auto;
}
 .box-2{
  width: 100px;
  height: 100px;
  background: yellow;
  margin: 50px auto;
}

Paste_Image.png

红色父元素和黄色子元素的上下margin都是50px，
它们相邻的时候，上下margin就发生了合并，

合并方式为：取较大的那个margin值。
代码举例

<body>
  <div class="box">
    <div class="box-1">
      <div class="box-2"></div>
    </div>
  </div>
</body>

.box{
  border: 1px solid;
  padding: 0;
}
.box-1{
  width: 200px;
  height: 200px;
  background: red;
  margin: 50px auto;
}
 .box-2{
  width: 100px;
  height: 100px;
  background: yellow;
  margin: 100px auto;
}

Paste_Image.png

红色父元素上下margin为50px，黄色子元素的上下margin为100px，它们相邻的时候，上下margin就发生了合并，且取值为较大的100px。

取消外边距合并的方法
将父子元素设置成不同的BFC，常用的是设置display: inline-block;
代码举例

<body>
  <div class="box">
    <div class="box-1">
      <div class="box-2"></div>
    </div>
  </div>
</body>

.box{
  border: 1px solid;
  padding: 0;
}
.box-1{
  width: 200px;
  height: 200px;
  background: red;
  margin: 50px auto;
  display:inline-block;
}
 .box-2{
  width: 100px;
  height: 100px;
  background: yellow;
  margin: 50px auto;
}

Paste_Image.png

对父元素设置display: inline-block;后，父子元素不在同一个BFC中，他们的margin就不会合并了。

margin合并

推荐阅读更多精彩内容