margin合并

作者: 辉夜乀 | 来源:发表于2017-03-23 13:24 被阅读27次

html css
为什么会外边距合并，怎么处理margin塌陷（盒模型）
margin的合并
css问题搜集
margin合并
margin合并
margin合并
margin 合并、盒模型
小技巧合集之css
相邻div的margin-top与margin-bottom会合

两个相邻元素如果处于同一个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;
}