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

Question

即使应用padding:0;margin:0，图像也会在下面获得一个神秘的空白区域。

Demonstration

红色边框应该拥抱图像，但底部有空间。

是什么导致这种情况，我该如何删除此空间？

Answer 1

图像（和一般的内联块元素）被视为字符。

因此，他们遵守基线规则。

在普通文本中，基线是大多数字母底部的线，例如在这句话中。

但有些字母，例如p，q，j等字母的尾部会低于基线。为了防止这些尾部与下一行的字母发生碰撞，在基线和底线之间保留了空间。

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

（图片来自WHATWG）

因此，即使没有文字，图像也会与基线对齐。幸运的是，修复非常简单：

img {vertical-align:bottom}

这会将图像对齐到线条的底部，同时删除神秘空间。

请注意，如果您的图像很小（小于线条高度），您可能会开始看到图像上方出现的神秘空间。要解决此问题，请将line-height:1px添加到容器元素。

希望这有助于我见过的许多人对此问题及类似问题的问题！

Answer 2

将img更改为块级元素

img {
  display: block;
}

也会移除图像下方的空间。

Answer 3

查看此CSS jsfiddle CSS

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