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

Question

图像在下方获得了一个神秘的空白空间，即使padding:0;margin:0已应用。

示范

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

是什么原因造成的，我怎样才能删除这个空间？

Answer 1

图像（以及一般的行内块元素）被视为字符。

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

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

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

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

（图片来自WHATWG）

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

img {vertical-align:bottom}

这会将图像与行的底部对齐，同时消除神秘空间。

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

希望这有助于我见过的许多人询问这个和类似的问题！

Answer 2

Changing img to a block level element

img {
  display: block;
}

will also remove the space below the image.

Answer 3

看看这个 CSS jsfiddle CSS

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