White line between the header and a section is visible [duplicate] - html

Question

This question already has answers here:
Image inside div has extra space below the image
(10 answers)
Closed 3 years ago.
For some reason a white line between the header and a section is visible that I have no idea why it is there, I double-checked and it's part of the content and not the padding, and I have no idea how to remove it that the header won't have that line between itself and the section below it, can someone have a look to see if there is something I missed in code?
header {
position: relative;
}
.headImage {
width: 100%;
height: 100%;
}
<header>
<img class="headImage" src="../images/Corson.with.wings.png" alt="Head Image">
</header>

Answer 1

I have added 3 solutions to fix the issue its because the default vertical-align value of the image is baseline; and img is considered as inline element
body {
background: url(https://placeimg.com/640/480/nature);
background-size: cover;
}
.header {
position: relative;
width: 100px;
margin: 10px;
background: red;
float:left;
}
.headImage {
width: 100%;
height: 100%;
}
.header.block img {
display: block; /* this will set image as a block */
}
.header.v-align img {
vertical-align: middle; /* this will align the inline element in the middle */
}
.header.f-left img {
float:left; /* in this case you will need to clear floats */
}
<div class="header">
<img src="https://placeimg.com/100/100/any" />
</div>
<div class="header block">
<img src="https://placeimg.com/100/100/any" />
</div>
<div class="header v-align">
<img src="https://placeimg.com/100/100/any" />
</div>
<div class="header f-left">
<img src="https://placeimg.com/100/100/any" />
</div>