Html 删除导航栏上方的空白区域

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/24089363/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 01:59:25  来源:igfitidea点击:

Remove white space above nav bar

htmlcss

提问by kevin

How do I remove the white space above this navbar that I created?

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

http://gyazo.com/b41271cad8d41c08c52ff26b1f1cab9e

http://gyazo.com/b41271cad8d41c08c52ff26b1f1cab9e

I have search StackOveflow for this answer, but can't find one that seems to fix my issue. I have set html, body padding/margin to 0 as well as reset all other elements. Does anyone have any advice?

我在 StackOveflow 上搜索了这个答案,但找不到似乎可以解决我的问题的答案。我已将 html、body padding/margin 设置为 0 并重置所有其他元素。有人有建议吗?

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

Here's the CSS

这是 CSS

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

回答by CMPS

Live demo

现场演示

The space at the top is create by the h1because of its default margin. To fix this:

h1由于其默认边距,顶部的空间是由创建的。要解决此问题:

#header h1{
    margin:0px;
}

PS: I assume that you removed the margin for the body tag. If not here's how you remove it:

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

body{
    margin:0;
}

回答by devadinesh

#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>

Put The bodyTag margin:0px;Header margin:0px;Try This Code

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