严格模式下图像后出现神秘填充/边距 [英] 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.jpgwidth =800height =400> 
< / div> 
  

结果是正常的，除非图像下面有5像素的空间，如果我将doctype更改为过渡。
如果我将display：block设置为图像，它也会消失。

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

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

  * 
 {
保证金：0;填充：0; 
} 
  

但它仍然相同。

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

解决方案

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

  img {
 vertical-align：top; 
} 
  

并且空格将消失。

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

I created a new document both with xhtml 1.0 and html 4.01 STRICT just to isolate this. All I have in its body is:

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

The result is normal except there's a 5px space below the image that goes away if I change the doctype to transitional. It also goes away if I set display: block to the image.

You can see the result yourself here (I know the white space on the right is normal since its a block element): http://i52.tinypic.com/2prd1jd.jpg

I tried setting margin/padding to 0, even this:

*
{
   margin: 0; padding: 0;
}

but it's still the same.

Can anyone please explain this behavior?

解决方案

It has to do with vertical alignment of the image. Try this:

img{
 vertical-align: top;   
}

and the space will go away.

To clarify, if you put some text next to the image you will see the issue. The image is aligning with the base of the text but letters like y and g will go below that line. The extra space is for those overhanging letters.

这篇关于严格模式下图像后出现神秘填充/边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！