Html 为什么我的图像下面有空间？

图像下面获得一个神秘的空白，即使

填充：0；边距：应用0

红色边框应该紧靠图像，但底部有空间

这是什么原因造成的？我如何删除此空间？

图像（通常是内联块元素）被视为字符

因此，它们遵守基线规则

在普通文本中，基线是大多数字母底部的一条线，如本句中所示

但有些字母，如

p

、

q

、

j

等，其尾部低于基线。为了防止这些尾部与下一行的字母碰撞，基线和底线之间保留了空间

此图说明了文本使用的不同行：

（图片来源）

因此，即使没有文本，图像也与基线对齐。幸运的是，解决方法非常简单：

img {vertical-align:bottom}

这将使图像与线条的底部对齐，同时消除神秘空间

只是要小心，如果你的图像很小（小于线条高度），你可能会看到神秘的空间出现在图像上方。要解决此问题，请向容器元素添加

行高：1px

---

希望这能帮助我见过的许多人询问这个问题和类似的问题

将

img

更改为块级元素

img {
  display: block;
}

还将删除图像下方的空间。

请查看此CSS CSS

---

@谢谢-第一次写参考答案，有点紧张！更多的人需要知道这件事。很好。为什么

行高：1px

起作用？这是一个黑客行为，所以我们可以使用稍微更合理的值吗？理想情况下，使用与图像高度相等的任何高度。基本上，

1px

使为文本保留的空间非常小，因此图像将“拉伸”行，并确保没有多余的空间。@Kolink:鉴于这将被关闭（3/5票），最好将此答案重新发布在副本上；这是一个比目前其他答案更详细的答案。虽然还有其他好的答案，但这是最好的解释。“即使没有文本，图像也与基线对齐”意味着即使指定图像大小，真实高度也包括底部和基线之间的（字体相关）增量，这是您在样式检查器中永远看不到的值！但是它会阻止您同时拥有多个图像。问题中的链接显示了包装在

div

元素中的

img

元素。默认情况下，

div

是块级的，因此这本身就可以防止多个

div

+

img

实例并排显示。如果图像在标记中相邻，则

display:inline block

将删除下面的空格并并排显示元素。@Astrotim-这不正确<代码>显示：内联块不会删除下面的空格。@Alohci，我已更正。需要将

display:inline block

应用于父

div

，将

display:block

应用于子

img

，以获得删除空格的并排图像。向上投票，因为这确实解决了问题中提出的问题。@NiettheDarkAbsol的上述评论未被列为原始问题中的关注点，也不是该答案被否决的原因。这是否回答了您的问题？

div {border:1px solid red;width:100px;line-height:0}
img {width:100px;}