Question

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

我已经搜索了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;
}

Answer 1

由于其默认边距，顶部的空间由h1创建。解决这个问题：

#header h1{
    margin:0px;
}

PS：我假设您删除了body标签的边距。如果不是这里你是如何删除它：

body{
    margin:0;
}

Answer 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;试用此代码

Answer 3

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

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

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