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

Question

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

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

结果是正常的，除了图像下方有一个 5px 的空间，如果我将 doctype 更改为 transitional，该空间就会消失。如果我将 display: block 设置为图像，它也会消失。

你可以在这里自己看到结果(我知道右边的空白是正常的，因为它是 block 元素):http://i52.tinypic.com/2prd1jd.jpg

我尝试将 margin/padding 设置为 0，即使这样:

*
{
   margin: 0; padding: 0;
}

但还是一样。

谁能解释一下这种行为？

Answer 1

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

img{
 vertical-align: top;   
}

空间将消失。

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