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
}

すると、 class に margin-top プロパティが適用されないという奇妙な振る舞いが見られました.f2。理由はわかりませんが、クラスにパディングまたはボーダーを追加すると機能しf1ます。これについて説明していただけますか？

Answer 1

問題はマージンの崩壊です。 http://www.w3.org/TR/CSS2/box.html#collapsing-marginsを確認してください

fromの代わりにpaddingto を追加できます。.f1margin.f2