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

【问题标题】：Mysterious padding/margin appears after image in strict mode严格模式下图像后出现神秘的填充/边距
【发布时间】：2015-05-27 08:10:15
【问题描述】：

我使用 xhtml 1.0 和 html 4.01 STRICT 创建了一个新文档，只是为了隔离这一点。我在它的身体里只有：

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

结果是正常的，除了如果我将文档类型更改为过渡，图像下方有一个 5px 的空间会消失。如果我将 display: block 设置为图像，它也会消失。

你可以在这里看到结果（我知道右边的空白是正常的，因为它是一个块元素）：http://i52.tinypic.com/2prd1jd.jpg

我尝试将边距/填充设置为 0，即使这样：

*
{
   margin: 0; padding: 0;
}

但还是一样。

谁能解释一下这种行为？

【问题讨论】：

【解决方案1】：

它与图像的垂直对齐有关。试试这个：

img{
 vertical-align: top;   
}

空间就会消失。

为了澄清，如果您在图片旁边放一些文字，您会看到问题。图像与文本的底部对齐，但像 y 和 g 这样的字母会低于该行。额外的空间用于那些悬垂的字母。

【讨论】：

感谢这成功了！但是我仍然不明白为什么这只发生在严格的文档类型中而不是过渡中。我的意思是它背后的逻辑是什么？
我必须查看规范，但我怀疑图像或显示有一些标准：内联将其默认为vertical-align:baseline，它甚至可能是所有元素的默认值。严格遵守标准，怪癖不遵守。
令人惊讶的是，在所有浏览器中它都在发生，没有人修复浏览器的引擎来将图像视为 div。 “默认情况下，图像是内联渲染的”但为什么还要空格？无论如何，您的回答有所帮助，我们可以继续前进。谢谢！

【解决方案2】：

这是因为，正如@Pawel 所提到的，“默认情况下，图像是内联渲染的”。由于它是“内联”的，因此下面会为 'g,j,q,y' 等字符提供一些空格。

所以另一种解决方案是将图像设置为块：

img {
  display:block;
}

【讨论】：