html - 内部 div 上的 margin-top 正在应用于外部 div。

Question

这是我设置的一个 fiddle 来说明这个问题。

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;
}​

正如您在 fiddle 中看到的那样，表单 div 与主体 div 的顶部齐平。更改表单的上边距会将它们都向下推。

Answer 1

因为这是 Collapsing Margins

div.body {
    overflow: hidden;
 }

现场演示 http://jsfiddle.net/rgfjL/15/

更多信息 http://reference.sitepoint.com/css/collapsingmargins