Question

我确信已多次询问过这个问题，但我找不到要搜索的内容。

我有以下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;
}

我遇到的问题是margin-top的{{1}}。它会在<ul> #container之上添加空格，而不是<div>之上。我必须遗漏一些关于CSS的基本知识，因为我只是不得到这种行为。有人可以开导我吗？

Answer 1

由于边缘坍塌，如果它接触到身体的顶部，那么这就是边缘所在的位置。轻松修复就是依靠顶部填充。

Answer 2

尝试填充。我还发现使用CSS重置有助于让所有内容在浏览器中表现得更相似。

http://meyerweb.com/eric/tools/css/reset/

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

2 个答案: