I am trying to remove unwanted space in my header

问题:

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!

回答1:

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.

回答2:

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;
}

回答3:

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>

回答4:

Just add the following css.

.header a img {
display:block;
}

回答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