css margin block 元素上的意外行为

Question

假设我有以下html代码

<div class="f1">
  <div class="f2">
  </div>
</div>

下面的 css 适用于它

.f1 {
    width: 200px;
    height: 200px;
    background: #fff;
    margin: 5em auto;
}


.f2 {
    background: #000;
    width: 100px;
    height: 100px;
    margin: 20px;  // this doesn't work
}

然后我看到一个奇怪的行为，即 margin-top 属性不适用于类 .f2。我不知道为什么，但是当我在类 f1 上添加一些填充或边框时，它就可以工作了。你能解释一下吗？

Answer 1

你的问题是边缘崩溃，检查 http://www.w3.org/TR/CSS2/box.html#collapsing-margins

您可以将 padding 添加到 .f1 而不是 .f2 的 margin。