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