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

前端之家收集整理的这篇文章主要介绍了html – 在严格模式下,图像后会出现神秘的填充/边距前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我创建了一个新的文档,与xhtml 1.0和html 4.01 STRICT只是为了隔离这一点。我所有的身体都是:
<div style="border: blue 3px solid;">
<img src="testimage.jpg" width="800" height="400">
</div>

结果是正常的,除了在图像下面有一个5px的空间,如果我将doctype更改为过渡,则会消失。
如果我将display:block设置为图像,它也会消失。

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

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

*
{
   margin: 0; padding: 0;
}

但它仍然是一样的。

任何人都可以解释这个行为吗?

解决方法

它与图像的垂直对齐有关。尝试这个:
img{
 vertical-align: top;   
}

空间将消失。

要澄清一点,如果您在图像旁放置一些文字,您将看到这个问题。图像与文本的底部对齐,但像y和g这样的字母将低于该行。额外的空间是那些悬垂的信件。

原文链接:https://www.f2er.com/html/233075.html

猜你在找的HTML相关文章