我正在尝试删除标题中不需要的空间答案

【问题标题】：I am trying to remove unwanted space in my header我正在尝试删除标题中不需要的空间
【发布时间】：2017-12-14 21:09:56
【问题描述】：

我正在尝试删除导航栏中这个不需要的小空间。我尝试删除填充、边距和边框，但都没有解决问题。这是我的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>

这里是我说的空间：

Unwanted Space

谢谢大家！

【问题讨论】：

请提供工作代码或链接。
此信息不足以解决您的问题，您需要在此处提供更多信息
您要删除徽标下方的小空间吗？
请提供详细代码。
您必须编辑（裁剪）您的图像。

标签： html css web

【解决方案1】：

“img”元素是一个“内联”元素，它只是一个其他字母，如“n”、“h”或....“p”。它们具有“下降”部分，并且内联元素的定位是“基线”（“n”的底部所在的位置）......所以您在图像下看到的不是边距或填充，而是字符 p, g ,j... 的降序行您可以根据其他答案的建议将显示更改为阻止，或者简单地设置vertical-align:bottom。

内联元素的默认vertical-align 值为baseline，这就是display:block 工作的原因...它不是行内内容！

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

【讨论】：

我意识到我的解释应该更彻底。我还有一个导航栏，我想进入屏幕最右侧的标题，而 img 仍然在左侧。我认为这会改变一些事情？
不是真的，只需在 img 中添加垂直对齐（以避免这种“间隙”）并浮动：右导航栏的包装
太棒了。感谢您的帮助！

【解决方案2】：

您的内嵌图片有一些额外的边距。把它交给display: block 和border: 0。它会解决你的问题。

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

【讨论】：

【解决方案3】：

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

只需添加以下 css。

.header a img {
display:block;
}

【讨论】：

【解决方案5】：

我认为它可能是 margin-bottom 属性的默认值。您可以按照@AnkitaPatel 分享的代码进行操作。但是，您也可以尝试在 CSS 中将 margin-bottom 属性更改为“margin-bottom:0px”

【讨论】：