css餘量和填充新手問題

我正在努力在下面的HTML和CSS代碼的行爲。我知道盒子的佈局和邊緣摺疊，但它似乎沒有解釋以下幾點：css餘量和填充新手問題

1）使用下面的代碼，未修改，徽標顯示與它之間約10px的空白和頂部該頁面以及大約4或5個像素，但由＃allcontent.background-color給出的顏色。有趣的是，如果我將body內的font-size屬性設置爲0px，則會刪除徽標上方的所有空白區域以及其下方的4或5像素。

2）如果#allcontent內的填充值從0px更改爲1px，則大約10px的填充實際上是使用＃allcontent.background-color指定的顏色在徽標的上方和下方添加的。

index.html文件：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> 
     <title>Home</title> 
     <link rel="stylesheet" type="text/css" href="my.css" /> 
    </head> 

    <body> 
     <div id="allcontent"> 
     <div id="header">   
      <p> 
      <img width="200" height="60" src="images/logo.gif" alt="Logo" /> 
      </p> 
      </div> 
     </div>  
    </body> 
</html>

my.css文件：

body {  
    margin: 0px; 
    padding: 0px; 
} 

#allcontent{ 
    background-color: #dddddd; 
    padding: 0px; 
    margin: 0px;  
} 

#header { 
    padding: 0px; 
    margin: 0px; 
}

來源

2011-07-04 David