logo标签列表

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

htmlcss
3

我相信这个问题已经被问了很多次，但我找不到应该搜索什么。

我有以下的HTML和CSS（请看jsfiddle实时示例）：

<!--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的一些基础知识，因为我真的不太理解这种行为。请问有谁能帮我解答一下？
2个回答
5

由于边距折叠，如果它接触到页面顶部，则边距就会存在于那里。简单的解决方法是仅依赖于顶部填充。

啊，现在我知道它叫什么了！谢谢。 - Skilldrick
1
谢谢。实际上我在真正的项目中使用了CSS重置，但是我得到了相同的效果。 - Skilldrick
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接