为什么margin-top在这里被应用到包含元素？

我确信这已被问了很多次，但我无法找出要搜索的内容。为什么margin-top在这里被应用到包含元素？

我有以下的HTML和CSS（see jsfiddle for a live example）：

<!--HTML--> 
<body> 
    <div id="container"> 
     <div id="header"> 
      <ul> 
       <li>Item1</li> 
       <li>Item2</li> 
      </ul> 
     </div> 
    </div> 
</body> 



/* CSS */ 
#container { 
    background-color: red; 
    width: 400px; 
    height: 200px; 
    margin: auto; 
} 

#header ul { 
    list-style: none; 
    margin-top: 20px; /* I want this to be the margin at the top of the ul, not the container */ 
} 

#header li { 
    float: left; 
    margin-right: 10px; 
}

我遇到的问题是与<ul>的margin-top。它在#container<div>之上增加空间，而不是在<ul>之上。我必须缺少一些关于CSS的基础知识，因为我只是没有得到这种行为。请有人赐教我吗？

来源

2010-11-01 Skilldrick