HTML nav 标签不覆盖整个顶部答案

【问题标题】：HTML nav tag does not cover the whole topHTML nav 标签不覆盖整个顶部
【发布时间】：2021-09-29 19:10:25
【问题描述】：

一开始<nav>标签没有全宽显示，也没有显示在最顶端。我发现我需要在 CSS 的 body 中添加 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>

【问题讨论】：

不是一个解决方案 - 而是一个评论 - 你应该看看 h1 的语义角色......似乎它在这里用作更多的包装 - 它应该提供最重要的信息页面 - 如果您需要包装器 - 使用 div / span 或其他 html 元素。
非常感谢！这对我来说很有意义！

标签： html css padding margin

【解决方案1】：

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

h1 {
  margin: 0;
}

【讨论】：

【解决方案2】：

如果这些样式没有被“重置”，您将看到不受欢迎的样式/结果和破坏。它永远建议“重置”浏览器的样式。看看这篇文章： http://sixrevisions.com/css/should-you-reset-your-css/ http://web.simmons.edu/~grovesd/comm244/notes/week4/css-reset

【讨论】：

【解决方案3】：

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

【讨论】：

欢迎您！请阅读How To Answer Well