CSS3小问题-子元素设置margin-top为什么影响了父元素

发表于 更新于 分类于 阅读次数：

前言

今天遇到一个问题，我写了下面一个样式，发现子的 margin-top 没有作用，但是父亲的却出现了子的 margin-top 值。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="father">
  <div class="children"></div>
</div>

<style>
  .father {
    height: 100%;
    width: 100%;
    padding: 0;
    margin: 0;
  }

  .children {
    margin-top: 20px;
  }
</style>

原因

在 css2.1 盒模型仲规定的内容:

相邻两个元素或者是嵌套元素时都会形成这个问题；当两个垂直外边距 相遇时，会形成一个外边距 ，称为‘外边距合并’;以外边距最大者为设置基准。所有毗邻的两个或更多盒元素的 margin 将会合并为一个 margin 共享之。毗邻(/同级或嵌套)的定义为：同级或者嵌套的盒元素，并且它们之间没有非空内容、Padding 或 Border 分隔。

所以我的父元素和子元素之间没有分割，然后就导致了子元素的 margin-top 出现在父亲元素上。

解决

  1. 父级或子元素使用浮动或者绝对定位 absolute 浮动或绝对定位不参与 margin 的折叠
  2. 父级 overflow:hidden;
  3. 父级设置 padding（破坏非空白的折叠条件）
  4. 父级设置 border