为什么我的图像上方和下方都有差距

Question

我不明白为什么我的H1的背景图像在其顶部和底部具有差距。我已经四处搜索，无法遇到类似问题的其他人。我尝试了许多不同的属性，但没有改变。我觉得它与H1内部有关，但这就是我所得到的。任何帮助都将得到赞赏；我是初学者。

这是我的代码

 <h1>K&C Transmission</h1>
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#contact">Contact</a>
  <a href="#services">Services</a>
  <a href="Javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>
.topnav {
  background-color: darkblue;
  overflow:hidden;
  border:6px solid black;
  margin-top:0px;
}
.topnav a {
  float:left;
  color:yellow;
  text-align:center;
  padding: 14px 20px;
  text-decoration:none;
  font-size:17px;
}
h1 {
  text-align:inherit;
  background-image: url("https://s9.postimg.org/tdjelhj1r/IMG_0090.jpg");
  height:280px;
  width:100%;
  margin:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  font-size:50px;
  position:relative;
  top:0px;
  margin-bottom:0px;
  vertical-align: top;

}

这是jsfiddle：

在此处输入链接说明

- 再次，JSFIDDLE上不存在问题。我不知道为什么它在原子上。

Answer 1

尝试这个。

 * {
   box-sizing: border-box;
 }
 h1 {
  margin : 0;
  padding: 0;
 }

Answer 2

我们需要将CSS应用于您的网站以获取确切的答案，但是您是否在CSS

中设置了以下选项

body{
  margin: 0;
  padding: 0;
}
h1{
  margin: 0;
  padding: 0;
}

Answer 3

是的，它应该只是标签中的图像。图像将显示在页面顶部。

另外，由于图片足够描述，因此在图像上再次显示H1/标题没有意义。

肯定会因为您是初学者而获得优质图像的荣誉。

Answer 4

<h1>K&C Transmission</h1>
<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Home</a>
  <a href="#contact">Contact</a>
  <a href="#services">Services</a>
  <a href="Javascript:void(0);" class="icon" onclick="myFunction()">&#9776;</a>
</div>
<style>
.topnav {
  background-color: darkblue;
  overflow:hidden;
  border:6px solid black;
  margin-top:0px;
}
.topnav a {
  float:left;
  color:yellow;
  text-align:center;
  padding: 14px 20px;
  text-decoration:none;
  font-size:17px;
}
h1 {
  text-align:inherit;
  background-image: url("/Volumes/BEAR/KandC Transmission/Media/IMG_0090.jpg");
  width:100%;
  margin:0;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  font-size:50px;
  position:relative;
  top:0px;
  margin-bottom:0px;
  vertical-align: top;

}
</style>

尝试此代码，它将起作用。我从 h1 tag中删除了 height。