如何删除Image元素下面的空白行及为什么行内元素有底线

翻译练习

原博客地址：Removing White Space Below Image Elements, or Why Inline Elements Have Descenders

HTML中Image元素下面展示的空白行经常造成困惑，但是这里有一个合乎逻辑的解释：Image是行内元素，行内元素都有底线。

如果你曾经试着把一个<img>标签包裹在一个设置了边框或者背景色的容器里，你就会碰到臭名昭著的“什么鬼？？？！！！为什么我的图像下面有内边距？”的问题。如果你尽职尽责地去查找“删除图像下面的空白行”，你大概会找到解决方案（或者这篇文章，提供了解决方案）：使用CSS把img设置为块级元素，然后图像下面这个烦人的空白行就神奇地消失了。可能看起来像这样：

img{
	display: block;
}

底线的问题

现在你清楚了解决方案，让我解释一下为什么会这样。了解原因会帮助你记住解决方案，也会让你理解这不是一个bug，而是一个历史遗留的问题。

让我们绕道看看字体排版的世界：

当你看着我在这里写的文本时，你会注意到小写字母分成三组：a, c, e, m, n, o, r, s, u, v, w, x, z, æ, and ø，这些高度一致，都包含在基线和肩线之间（见上图）。其他的字母要么有顶线（b, d, f, h, k, l, t），要么有底线（g, j, p, q, y）。顶线是字母肩线突出向上的部分，底线是字母基线以下的部分。

这些跟图像有什么关系呢？简单：在HTML中<img>标签是一个行内元素。这意味着它被当成文本处理。当文本被放置在页面中时就为底线留出了空间。换句话说，你在看到的图像下面的空白行就是浏览器假设在文本中在图片之前或之后应给有一个底线，从而给它留出空间。这个空白行问题出现的原因是因为图像最初被引入的时候是被认定为行内元素的，今天我们主要把它当成块级元素来使用。正如我早先所说，这都是由于历史遗留的问题。

所以，总结一下：图像是假定为有底线的行内元素。当你想让它表现的像块级元素，那就把它定义为块级元素，然后底线就神奇的消失了。

完结。