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>

---

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.

---

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

---

试试这个，并添加这个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>

链接地址: http://www.djcxy.com/p/89252.html

上一篇: 在CSS中，我可以排列内联的高度吗？

下一篇: 我正尝试删除头部中不需要的空间