块元素上的css margin意外行为

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，而不是margin中的.f2。