css外边距重叠

初学css的时候,遇到一个问题,昨天终于得到解决。

css外边距重叠

边界重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。它们的外边距取较大的一个。

下面是我遇到的情况:

先上代码:

css:

1
2
3
4
5
6
7
8
9
10
11
12
.parent{
width: 800px;
height: 300px;
background-color: green;
margin: 0 auto;
}
.child{
width: 500px;
height: 100px;
background-color: blue;
margin-top: 100px;
}

html:

1
2
3
<div class="parent">
<div class="child"></div>
</div>

预期效果

实际效果

为什么会发生如上的情况呢?

由于外边界重叠,包含块和子元素的margin-top属性值会选取较大的值:100px

边界重叠出现情况如下

  1. 两个同级上下元素
  2. 祖先元素与内嵌元素(没有内边距或边框隔开,就祖先元素overflow:hidden/auto/scroll可有隔开的作用,避免叠加)
  3. 本身是空元素时,自身上下外边距也会重合(没有边框或内边距隔开)

    上面几种情况可以结合发生。只有普通文档流中,块框的垂直外边距才会发生叠加。行内框、浮动框或绝对(个人认为包括绝对定位和相对定位)定位框之间的外边距不会发生叠加。

参考文档:
CSS 外边距(margin)重叠及防止方法
CSS外边距margin上下元素重叠