css - 块元素上的 CSS 边距意外行为

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 属性不适用于 class .f2。我不知道为什么，但是当我在课堂上添加一些填充或边框时，f1它就会起作用。你能解释一下吗？

Answer 1

您的问题是边距折叠，请检查http://www.w3.org/TR/CSS2/box.html#collapsing-margins

您可以添加paddingto.f1而不是marginfrom .f2。