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所提到的，＆＃34;默认情况下，图像是内联呈现的＃34;。因为它是＆＃34;内联＆＃34;下面的某些空格将用于诸如＆＃39; g，j，q，y＆＃39;之类的字符。等等 enter image description here

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

img {
  display:block;
}