對於以下簡單代碼：
點擊(此處)折疊或打開
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
- <html>
- <head>
- <title></title>
- <meta name="" content="">
- <style>
- *{
- margin:0px;
- padding:0px;
- }
- #no1{
- background:#808000;
- width:300px;
- height:300px;
- margin:100px 0 0 100px;
- }
- #no2{
- background:#c0c0c0;
- width:150px;
- height:150px;
- margin-left:20px;
- margin-top:30px;
- }
- </style>
- </head>
- <body>
- <div id="no1">
- <div id="no2">Span2
- </body>
- </html>
如果您認為應該是這樣的話：
那就錯了。結果是這樣的：
因為CSS中存在一個margin collapse，即邊界塌陷或者說邊界重疊。對於上下兩個並列的div塊而言，上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin里最大值作為顯示值，所以從這個意義上說：CSS及瀏覽器的設計者們希望我們在布局時，如果遇到上下兩個並排內容塊的安排，最好只設置其中每個塊上或下margin的一處即可。
但對於父塊DIV內含子塊DIV的情況，就會按另一條CSS慣例來解釋了，那就是：對於有塊級子元素的元素計算高度的方式,如果元素沒有垂直邊框和填充,那其高度就是其子元素頂部和底部邊框邊緣之間的距離。所以對於代碼：
點擊(此處)折疊或打開
- <div class="father"></div>
father這個div的高度為0，因為里面沒有能夠撐開div的內容。如果變為：
點擊(此處)折疊或打開
- <div class="father">I am here.</div>
則高度就是文字的高度，因為此時文字在撐着這個DIV。
話說回來，一個DIV和它的子DIV特別重視垂直邊框或填充，也就好像是，一口鍋，里面放個盆，能不能扣住里面的盆，主要看鍋蓋了，垂直邊框或填充就是這個“鍋蓋”。於是解決的方式至少有以下兩種：
結論：
解決父子DIV中頂部margin cllapse的問題，需要給父div設置：
1、邊框，當然可以設置邊框為透明;
點擊(此處)折疊或打開
- border:1px solid transparent
- 或
- border-top:1px solid transparent
此外，還可以通過over-flow來解決，給父DIV寫入：
點擊(此處)折疊或打開
- over-flow:hidden;