提问人：John 提问时间：6/20/2011 最后编辑：John 更新时间：5/27/2015 访问量：7577
在严格模式下，图像后出现神秘的填充/边距
Mysterious padding/margin appears after image in strict mode
问：
我使用 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;
}
但它仍然是一样的。
谁能解释一下这种行为？
答：
48赞
James Montagne
6/20/2011
#1
它与图像的垂直对齐有关。试试这个：
img{
vertical-align: top;
}
空间会消失。
澄清一下，如果您在图像旁边放置一些文本，您将看到问题。图像与文本的底部对齐，但 y 和 g 等字母将位于该行下方。额外的空间用于那些悬垂的字母。
评论
0赞
John
6/20/2011
谢谢，这成功了！但是，我仍然不明白为什么这种情况只发生在严格的文档类型中，而不是在过渡中。我的意思是它背后的逻辑是什么？
0赞
James Montagne
6/20/2011
我必须查看规范，但我怀疑 image 或 display：inline 周围有一些默认的标准，它甚至可能是所有元素的默认值。严格遵守标准，怪癖不遵守。vertical-align:baseline
0赞
Pawel Cioch
5/21/2014
假设在所有浏览器中都发生了这种情况，并且没有人修复浏览器引擎以将图像视为 div。 “默认情况下，图像是内联呈现的”，但仍然为什么是空格？无论如何，您的回答有所帮助，我们可以继续前进。谢谢！
5赞
Devs love ZenUML
5/27/2015
#2
这是因为，正如 @Pawel 所提到的，“默认情况下，图像是内联呈现的”。由于它是“内联”的，因此下面将为“g，j，q，y”等字符提供一些空格。
因此，另一种解决方案是将图像设置为块：
img {
display:block;
}
这里有一个例子：https://gist.github.com/MrCoder/450783bc33d6b412075d
评论