White line between the header and a section is visible

Question

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>