我正尝试删除头部中不需要的空间 [英] I am trying to remove unwanted space in my header

问题描述

我正试图在导航栏中删除这个不需要的小空间。我尝试删除填充，边距和边框，其中没有一个解决了问题。这是我的CSS：

.nav {list-style：none; font-family：'Oleo Script'，草书;显示：内联;保证金：0; padding-top：100px; padding-bottom：0px; float：right;}。header {background-color：rgba（0，0，0，.7）;位置：固定; top：0; padding-bottom：0;保证金：0; width：100％;}

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

我在谈论的空间：

Unwanted空间

感谢大家！

解决方案

img元素是inline元素，它只是其他任何字母，如n，h或.... p 。它们具有降序部分，内联元素的定位是基线（n的底部所在的位置）...因此，您在图像下看到的不是边距或填充，而是用于字符p，g，j的降序部分...
您可以按照其他答案的说明将显示更改为阻止，或者只需设置 vertical-align：bottom

内联元素的默认 vertical-align 值是基线，这是 display：block 正在工作的原因......它不是行内容！

line-height：0 也适用于您，如果行中没有其他内容的话。

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!

解决方案

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.

这篇关于我正尝试删除头部中不需要的空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！