我使用 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;
}
但还是一样。
谁能解释一下这种行为?
最佳答案
它与图像的垂直对齐有关。试试这个:
img{
vertical-align: top;
}
空间将消失。
澄清一下,如果您在图片旁边放置一些文字,您就会看到问题。图像与文本的底部对齐,但像 y 和 g 这样的字母将位于该行下方。额外的空间用于那些悬垂的字母。
关于html - 在严格模式下图像后出现神秘的填充/边距,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6405009/