Question

这是我设置说明问题的小提琴。

这是代码

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;应用于课程body。

Answer 3

使用溢出：隐藏;在div.body上将导致div.contact-form被切断。

在div.body上添加padding-top而不是div.contact-form上的margin-top。

Answer 4

这就是你必须要做的工作：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;
}

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

4 个答案: