html - マージンが適切に管理されていない

Question

jsfiddle: http://jsfiddle.net/HFCN3/
class にマージンを入れる.caと、 の最初の要素はからではなく、ボディ全体から#divマージンを適用します。#divの解き方？

Answer 1

padding:0 と overflow:hidden.. を追加する必要があります。

HTML

<div id="div">
  <div class='ca'>
    Text
  </div>
  <div class='ca'>
    Text
  </div>
</div>

CSS

body
{
    margin: 0;
    padding:0;
}
#div
{
    width: 300px;
    height: 500px;
    background-color: black;
    color: white;
        overflow: hidden;
}
div .ca
{
    width: 100%;
    height: 50px;
    margin-top: 6px;
        background-color: red;

}

結果

Answer 2

説明するのはちょっと難しいですが、マージンには跳ね返る何かが必要です。div の境界でバウンスできないため、div でバウンスします。

に を追加することで解決できpadding-top: 6pxます#div。

または、Itay のソリューションを使用することもできますが、個人的overflow: autoには同じ効果を使用しますが、div が展開されたときにコンテンツが非表示になることはありません。