HTML/CSS保證金問題

現在我已經開發了3年的網站和今天發現一些東西，我無法理解。我有工作代碼： http://pastie.org/1439629 HTML/CSS保證金問題

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> 
<title>Page Title</title> 
<style type="text/css" media="screen"> 
    .box{ 
    margin:50px 0; 
    background:red; 
    border:1px solid black; 
    } 
</style> 
</head> 
<body> 
<div class="box"> 
    Y 
</div> 

<div class="box"> 
    X 
</div> 
</body>

現在的問題是，我無法弄清楚，爲什麼用類BOX的兩個div共用相同的空白。即在Y上的底部邊緣是相同X的頂緣不應該有兩個而不是50像素之間100pixel空間？

編輯：如果我編輯CSS來

.box{ 
    margin:50px; 
    background:red; 
    border:1px solid black; 
    float:left; 
    height:50px; 
    width:50px; 
}

那麼兩者之間的距離應該還是50像素，但沒有！現在它的100像素。爲什麼？

對不起，我這樣一個平凡的問題，但我無法弄清楚。

來源

2011-01-08 Tarun

這種行爲是HTML標準的一部分。見：http://www.w3.org/TR/CSS21/box.html#collapsing-margins

來源

2011-01-08 09:25:52

我想以後從底部50px的餘地DIV Y，DIV X檢查緣頂部，它是50像素。那麼不需要再次從頂部保留50 px。

來源

2011-01-08 09:12:21 imez

我知道，我能給的也只有底邊距：50像素的50像素的間距各格後，用左子屬性，以確保最後一個div不具有後50像素。但我的問題是，爲什麼邊際合併？ – Tarun 2011-01-08 09:16:13

HTML/CSS保證金問題

回答

相關問題