HTML 导航标签没有覆盖整个顶部

Question

起初，<nav> 标签没有全宽显示，也没有显示在最顶部。我发现我需要在 CSS 中的正文中添加 margin: 0 以全宽显示它。

如何将 <nav> 标签推到最顶部？

我预计 <nav> 标签会默认以全宽显示在最顶部。 为什么不是？

body {
  background: rgb(240, 240, 240);
  margin: 0;
}

nav {
  font-family: sans-serif;
  background: darkgrey;
  padding-left: 20px;
}

#todo {
  font-size: 150%;
  color: rgba(255, 0, 0, 0.411);
}

#list {
  color: grey;
  font-size: 120%;
}

<nav>
  <h1>
    <span id='todo'>TODO</span><span id='list'>List</span>
  </h1>
</nav>

Answer 1

你的问题是你的导航中的 <h1> 默认有边距。

h1 {
  margin: 0;
}

Answer 2

如果不“重置”这些样式，您会看到不想要的 styles/outcomes 和损坏的东西。它永远建议“重置”浏览器的样式。浏览一下这篇文章： http://sixrevisions.com/css/should-you-reset-your-css/ http://web.simmons.edu/~grovesd/comm244/notes/week4/css-reset

Answer 3

您应该首先使用 CSS 重置或在 CSS 文件的第一行说边距

HTML 导航标签没有覆盖整个顶部

HTML nav tag does not cover the whole top

html

css

margin

padding