Question

为什么段<img/>中的<p>标记有一些奇怪的间距？

我注意到这是因为使用了firebug，其中img可能比文本应该是内联的位置高4-5像素。

实施例： http://jsbin.com/epavij

此处<a>标记位于<img/>周围，而<a>显示为占用较小的空格，只有几个像素。

显然display:block解决了这个问题，但是导致它的原因是什么？

为了论证，我打算让图像内嵌一些文字;虽然我已经测试过，但添加文字并不能解决问题。

Answer 1

要了解这种情况，请将内嵌图像视为来自不同字体/大小的字母。

接下来，请看这里的示例： http://phrogz.net/css/vertical-align/index.html

Answer 2

这是由line-height和vertical-align的组合引起的。

简单示例：http://jsfiddle.net/3A3sw/1/

另见http://www.w3.org/wiki/CSS/Properties/vertical-align

Answer 3

这是因为“基线”发生在内联元素上。 “baseline”是默认值（如果我错了，请更正我）vertical-align元素，最明显的是内联元素（如span和anchors）

向您展示我的意思，尝试在图片旁边放置字母“qfx”等文字。你会注意到图像的底部与“x”的底部一致。这是基线对齐 - 您的<img>标记所在的位置。

但是锚标记将占据“q”的底部。锚标签将占据基线之外，直到底部。

Answer 4

在某些浏览器中，内嵌图像通常会在图像下方添加几个像素的空白区域。如果你谷歌这个，你会发现它是一个常见的问题。以下是一些供参考的链接。第一个是重复的Stack Overflow问题：

Answer 5

尚未提及的一个解决方案是明确设置图像及其父容器的高度。

例如，使用这样的HTML

<div class="wrap">
    <div class="line">
        <a href=""><img src="/favicon.ico" /></a>
    </div>
</div>

这个CSS会破坏你提到的“奇怪”间距:(这已经在其他答案中解释过了）

div.wrap {background-color:#9f3; width:100px;}
a,img {border:none; height: 16px;}
div.line{background-color: yellow; height: 16px; border-top: 1px solid black; border-bottom: 1px solid black;}

Live test case

如果你不知道高度或有很多这样的图像，你可以使用简单的客户端脚本自动设置高度。

奇怪的<img/>标签间距

5 个答案: