I am trying to remove unwanted space in my header

Question

I am trying to remove this little unwanted space in the navigation bar. I have tried removing padding, margin, and border, none of which have resolved the issue. Here is my css:

.nav {
  list-style: none;
  font-family: 'Oleo Script', cursive;
  display: inline;
  margin: 0;
  padding-top: 100px;
  padding-bottom: 0px;
  float: right;
}

.header {
  background-color: rgba(0, 0, 0, .7);
  position: fixed;
  top: 0;
  padding-bottom: 0;
  margin: 0;
  width: 100%;
}

<div class=header>
  <a href="index.html">
    <img src="https://lh4.googleusercontent.com/-IqHfCyPGn00/AAAAAAAAAAI/AAAAAAAAAA8/WsxciIskxSo/photo.jpg?sz=328" alt="Logo.png" style="height:150px; width:150px; border-bottom: 0px;">
  </a>
</div>

Here is the space I am talking about:

Unwanted Space

Thanks everyone!

Answer 1

Your inline image has some extra margin. Give it to display: block and border: 0. It will solve your issue.

.header a img{
  border:0;
  display:block;
}

Answer 2

Try this and add this css:

.header a {
  display: block;
  width: 150px;
  height: 150px;
}
.header img{
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

.nav {
  list-style: none;
  font-family: 'Oleo Script', cursive;
  display: inline;
  margin: 0;
  padding-top: 100px;
  padding-bottom: 0px;
  float: right;
}

.header {
  background-color: rgba(0, 0, 0, .7);
  position: fixed;
  top: 0;
  padding-bottom: 0;
  margin: 0;
  width: 100%;
}
.header a {
  display: block;
  width: 150px;
  height: 150px;
}
.header img{
  height: auto;
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

<div class=header>
  <a href="index.html">
    <img src="https://lh4.googleusercontent.com/-IqHfCyPGn00/AAAAAAAAAAI/AAAAAAAAAA8/WsxciIskxSo/photo.jpg?sz=328" alt="Logo.png" style="height:150px; width:150px; border-bottom: 0px;">
  </a>
</div>

Answer 3

Just add the following css.

.header a img {
display:block;
}

Answer 4

The "img" element is an "inline" element, it's just a any other letter, like "n", "h" or .... "p". They have "descending" parts, and the positioning for inline elements is "baseline" (where the bottom of the "n" rests)... so what you see under the image is not a margin or padding, but the area of the line for descending part of the characters p, g ,j... You can change the display to block, as sugessted by other answers, or simply set vertical-align:bottom.

The default vertical-align value for inline elements is baseline, which is the reason behind display:block being working... it's not in line content!

line-height: 0 will also works for you if there is nothing else in the line.

Answer 5

I think it might be the default value for margin-bottom attribute. You can follow the code shared by @AnkitaPatel. But, you can also try changing the margin-bottom attribute to "margin-bottom:0px" in your CSS