html - 内部divのmargin-topが外部divに適用されています。

Question

これが私がセットアップしたフィドルで、問題を説明しています。

http://jsfiddle.net/rgfjL/13/

これがコードです

HTML

<div class="body">
    <div class="contact-form" class="clearfix">
        <p> asdsasadsad </p>
    </div>
<div>

CSS

div.body {
  display: block;
  height: 800px;
  width: 1024px;
  background: #474747;
}

div.contact-form {
  display: block;
  background-color:#F2F7F9;
  height: 600px;
  width:465px;
  padding:20px;
  margin: 250px auto;
  border: 6px solid #8FB5C1;
 -moz-border-radius:15px;
 -webkit-border-radius:15px;
  border-radius:15px;
}​

フィドルでわかるように、フォームdivはボディdivの上部と同じ高さになります。フォームの上部マージンを変更すると、両方が押し下げられます。

Answer 1

これは折りたたみマージンだからです

div.body {
    overflow: hidden;
 }

ライブデモhttp://jsfiddle.net/rgfjL/15/

詳細http://reference.sitepoint.com/css/collapsingmargins

Answer 2

overflow:hidden; の使用 on div.body は div.contact-form を切断します。

div.contact-form の margin-top の代わりに、div.body に padding-top を追加します。

Answer 3

これを機能させる方法は次のとおりです。http://jsfiddle.net/rgfjL/16/

<div class="body">
            <div class="contact-form" class="clearfix">
                <p> asdsasadsad </p>
    </div>
<div>

div.body {
    display: block;
    height: 800px;
    width: 1024px;
    background: #474747;
    padding-top:250px;
}


div.contact-form {
    display: block;
    background-color:#F2F7F9;
    height: 600px;
    width:465px;
    padding:20px;
    margin: 0 auto;
    border: 6px solid #8FB5C1;
    -moz-border-radius:15px;
    -webkit-border-radius:15px;
    border-radius:15px;
}

Answer 4

overflow: hidden;クラスに申し込むbody。