4

请参阅以下 jsFiddle：http: //jsfiddle.net/Leng/kQvNH/

谁能解释为什么每行水平点周围似乎都有大量的填充（上面大约 15 像素，下面大约 4 像素）？图像只有 2px 高。填充从哪里来？

请注意：

对我来说，只有在我开始使用 HTML5 标题的文档时才会出现这种围绕图像的神秘填充：

<!DOCTYPE html>
<html>

当我使用 -任何其他- 标题时，图像正常显示（无填充），例如 HTML4 或网页的此 XHTML 标题：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

所以这似乎是 HTML5 的不一致。我想切换到标准的 HTML5 标题，但是这个小小的烦恼阻止了我这样做。

感谢您的任何指导。

解决方案：

这是带有解决方案的 jsFiddle：http: //jsfiddle.net/Leng/Sn2PC/

img
{
    display:block;
    margin:0 auto;
}

这是基于下面克里斯的回答。

请注意，设置 font-size:0 或 line-height:0不是解决方案，因为这（显然）会混淆字体大小和行高。

同样，将显示设置为阻止并建立自动边距对于在 HTML4 或 XHTML 中完成正常、居中、未填充的图像不是必需的。

HTML5 已经创建了这个“功能”，其中图像是内联的，并且将根据行高或字体大小进行填充。

4

3 回答 3

3

我认为这是因为img元素是内联的。将font-sizeor设置line-height为一些小的东西可以解决这个问题。或者，将图像设置为display: block并在其上设置高度。

于 2013-03-05T22:27:25.570 回答
1

您的<img>标签显示为内联，因此它与普通文本一起使用。只需将容器的 line-height 更改为更接近图像高度和 font-size ( 1px) 即可解决此问题。

因此，为了解释填充，您的图像周围没有填充。它是一个空的文本行，其高度（行高）由用户代理定义。

在这里摆弄

于 2013-03-05T22:34:56.023 回答
0

你可以添加一个 line-height:2px; #theDiv 风格

于 2013-03-05T22:29:18.723 回答