內部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;到類body。

Answer 3

使用overflow：hidden;對div.body會導致div.contact-form被切斷。

而不是div.contact-form上的margin-top，在div.body上添加padding-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; 
}