Why does my image have a gap above and below it? - html

Question

I don't understand why the background image of my h1 has a gap at its top and bottom. I've searched around and can't someone else with a similar issue. I've tried a bunch of different properties, but it doesn't change. I have a feeling it has something to do with it being inside an h1, but that's all I got. Any help is appreciated;I'm a beginner.
Here's my code
<h1>K&C Transmission</h1>
<div class="topnav" id="myTopnav">
Home
Contact
Services
☰
</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;
}
And here's the jsfiddle:
enter link description here
--Again, the problem does not exist on jsfiddle. I don't know why it does on Atom.

Answer 1

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

Answer 2

We would need the css applied to your site to get the exact answer, but have you set the following options in your css
body{
margin: 0;
padding: 0;
}
h1{
margin: 0;
padding: 0;
}

Answer 3

Yes, it should just be an image in the tag. The image will display at the top of the page.
Also, no point in displaying H1/Title again over the image, since the picture is descriptive enough.
Definitely give yourself a credit for using a good quality image, since you're a beginner.

Answer 4

<h1>K&C Transmission</h1>
<div class="topnav" id="myTopnav">
Home
Contact
Services
☰
</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>
Try this code,it will work.I removed height from h1 tag.