删除导航栏上方的空白答案

【问题标题】：Remove white space above nav bar删除导航栏上方的空白
【发布时间】：2021-06-26 09:41:36
【问题描述】：

如何删除我创建的导航栏上方的空白？

我已在 StackOveflow 中搜索此答案，但找不到似乎可以解决我的问题的答案。我已将 html、body padding/margin 设置为 0 并重置所有其他元素。有人有什么建议吗？

<nav id="header">
  <div class="home-header">
    <a href="#"><h1> testing this </h1></a>
  </div>
</nav>

这是 CSS

#header {
  position: relative;
  margin: 0 auto 0;
  padding-top: 0px;
  background-color: $main-color;
}

【问题讨论】：

标签： html css

【解决方案1】：

Live demo

顶部的空间是由h1 创建的，因为它的默认边距。要解决这个问题：

#header h1{
    margin:0px;
}

PS：我假设您删除了 body 标签的边距。如果不是，请按照以下方式删除它：

body{
    margin:0;
}

【讨论】：

啊，这就是修复！非常感谢。我没有意识到 h1 标签创建了边距。
@kevin 是的，h1 创建了一个默认边距。并检查 body 标签的更新。如果您没有将正文的边距设置为零，它仍会创建一个空白区域。因此，如果您没有删除 body 标签的边距，我会为其添加代码；）如果您没有更多问题，请将其标记为已解决
我的解决方案是在 _layouts 中添加 Body margin = -50px。把我逼疯了。

【解决方案2】：

#header {
  position: relative;
  margin: 0;
  padding-top: 0px;
  background-color: $main-color;
}
body{
margin:0px;
}

<body>
<nav id="header">
  <div class="home-header">
    <a href="#"><h1> testing this </h1></a>
  </div>
</nav>
</body>

把body标签margin:0px;标头margin:0px;试试这个代码

【讨论】：

【解决方案3】：

我遇到了这个问题。没有其他解决方案可以帮助我，所以最终我找到了一个：

当我在 Windows 中使用 Visual Studio 对 HTML 文件进行编码时，它会将其保存为 UTF-8 BOM，因此当浏览器呈现页面时，它会误解该字节顺序标记并将其显示为所有内容上方的空白否则。

如果是这种情况，您只需将文件重新编码为 UTF-8。为了简单起见，我使用了 Notepad++，但我几乎可以肯定你也可以在 VS 中做到这一点。

【讨论】：