在严格模式下，图像后出现神秘的填充/边距

Question

我创建了一个新文档，分别使用xhtml 1.0和html 4.01 STRICT。目的是为了隔离这个问题。在文档的主体部分只有如下内容：

<div style="border: blue 3px solid;">
<img src="testimage.jpg" width="800" height="400">
</div>

结果很正常，除了图像下方有5像素的空白。如果我将doctype更改为过渡性(doctype transitional)，该空白就会消失。如果将图像的display属性设置为block，也会消失。

您可以在此处查看结果(我知道右侧的白色空间是正常的，因为它是块级元素)：http://i52.tinypic.com/2prd1jd.jpg 我试过将margin/padding设置为0，甚至试了这个：

*
{
   margin: 0; padding: 0;
}

但它仍然是相同的。

请问有人可以解释这种行为吗？

- John

---

我的猜测是display:inline会保留空格 - 如果您从标记中删除所有换行符，会发生什么？ - kinakuta

哎呀，这个属性不应该存在，因为img标签默认是内联的 :). 不幸的是，这并不能解决问题。 - John

Answer 1

这与图像的垂直对齐有关。尝试这样做：

img{
 vertical-align: top;   
}

并且空格将会消失。

澄清一下，如果你在图片旁边放置一些文本，你会看到问题。图片与文本基线对齐，但像 y 和 g 这样的字母会低于那条线。额外的空间是为这些超出基线的字母留出的。

- James Montagne

---

谢谢，这解决了问题！然而我仍不明白为什么这只会在严格的文档类型中发生，而在过渡性文档类型中却不会。我的意思是背后的逻辑是什么？ - John

我需要查看规范，但我怀疑在图像或display:inline方面有一些标准将其默认为vertical-align:baseline，甚至可能是所有元素的默认值。Strict遵循标准，而quirks则不遵循。 - James Montagne

令人惊讶的是，在所有浏览器中都会发生这种情况，但没有人修复浏览器引擎以将图像视为div。 “默认情况下，图像呈现为内联”，但为什么还有空格？无论如何，您的答案有所帮助，我们可以继续了。谢谢！ - Pawel Cioch

Answer 2

这是因为，正如@Pawel所提到的，“默认情况下，图像是内联呈现的”。由于它是“内联”的，因此会给像'g，j，q，y'等字符留出一些空间。

• 该图像来自：https://developer.mozilla.org/en-US/docs/Images,_Tables,_and_Mysterious_Gaps。

因此，另一个解决方案就是将图像设置为块级元素。

img {
  display:block;
}

这里有一个例子：https://gist.github.com/MrCoder/450783bc33d6b412075d

- Devs love ZenUML