CSS图像没有触及顶部

Question

我正在创建一个横向的导航栏，它可以触及两种尺寸的屏幕。唯一的问题是它没有触及顶部（http://i.imgur.com/0zhNHgz.png，因为你可以看到黄色矩形没有碰到顶部）我已经在CSS中这样做了：

html, body
{
    margin:0;
    padding:0;
}

HTML代码：

<div id="nav">
    <ul>
        <li><a href="/test">HOME</a></li>
    </ul>
</div>

我做错了什么？

Answer 1

我个人使用：

 *{
    padding: 0;
    margin: 0;
   /* I usually use this too: */
   box-sizing: border-box;
}

这将从每个元素中删除填充和边距。阻止像你这样的事件发生在我希望一切都齐平的地方。它让我可以更好地控制元素。

正如其他答案所述，问题是您的ul也有填充。上面的代码将解决这个问题和未来的任何问题。

Answer 2

您的<ul>设置为display：block;默认情况下。您正在看到它之前的换行符。你必须在你的CSS中考虑到像margin-top这样的东西：-10px;