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

Question

我用xhtml 1.0和html 4.01 STRICT创建了一个新文档,以便将其隔离开来.我所拥有的只是:

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

结果是正常的,但如果我将doctype更改为transitional,则图像下方的5px空间会消失.如果我将display:block设置为图像,它也会消失.

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

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

*
{
   margin: 0; padding: 0;
}

但它仍然是一样的.

任何人都可以解释这种行为吗？

Answer 1

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

img{
 vertical-align: top;   
}

这个空间会消失.

为了澄清,如果您在图像旁边放置一些文字,您将看到问题.图像与文本的底部对齐,但y和g之类的字母将在该行的下方.额外的空间用于那些悬垂的字母.

Answer 2

这是因为，如@Pawel所述，“默认情况下，图像是内联渲染的”。由于它是“内联”，因此在下面将为'g，j，q，y'等字符提供一些空格。在此处输入图片说明

因此，另一种解决方案是将图像设置为块：

img {
  display:block;
}