为什么<p>段落中的<img/>标签会有一些奇怪的间距？
我在使用 firebug 时注意到了这一点，其中 img 可能比文本应该内联的位置高 4-5 像素。
这里<a> 标记围绕<img/>，而<a> 显示占用的空间更小一些像素。
显然display:block 解决了这个问题，但是是什么原因造成的呢？
为了论证的缘故，我计划将图像与一些文本内联；虽然我已经测试过了，添加文本并不能解决问题。
【问题讨论】：
display:block 解决了，在这种情况下我无法使用。
标签： html css image xhtml vertical-alignment
要了解这种情况，请将内联图像视为来自不同字体/大小的字母。
接下来，请参阅此处的示例： http://phrogz.net/css/vertical-align/index.html
【讨论】：
这是由line-height 和vertical-align 的组合引起的。
【讨论】：
这是因为“基线”发生在内联元素上。 “基线”是默认值（如果我错了，请纠正我）vertical-alignfor 元素，尤其是内联元素（如跨度和锚点）
为了向您展示我的意思，请尝试在图像旁边放置诸如字母“qfx”之类的文本。您会注意到图像的底部与“x”的底部对齐。这就是基线对齐 - 您的 <img> 标签位于其上。
但是锚标签会一直占据到“q”的底部。锚标签将占据基线之外，直到底部。
【讨论】：
在某些浏览器中，内嵌图像通常会导致在图像下方添加几个像素的空白区域。如果你谷歌这个，你会发现这是一个常见的问题。 这里有一些链接供参考。第一个是重复的 Stack Overflow 问题：
【讨论】：
尚未提及的一种解决方案是显式设置图像及其父容器的高度。
例如对于这样的 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;}
如果你不知道高度或者有很多这样的图片，你可以使用简单的客户端脚本来自动设置高度。
【讨论】：