如何删除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>标签是一个行内元素。这意味着它被当成文本处理。当文本被放置在页面中时就为底线留出了空间。换句话说，你在看到的图像下面的空白行就是浏览器假设在文本中在图片以前或以后应给有一个底线，从而给它留出空间。这个空白行问题出现的缘由是由于图像最初被引入的时候是被认定为行内元素的，今天咱们主要把它当成块级元素来使用。正如我早先所说，这都是因为历史遗留的问题。

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

完结。