margin合并

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

.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值。
  代码举例

.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;
  代码举例

.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就不会合并了。