css - float 元素跨度增加空间

Question

我有类似下面的代码:

<div style="border:2px black solid;overflow:hidden;">
    <span style="float:right;">
        <img src="sprintlogo.png" alt="Test Image 1" />
    </span>
    <img src="sprintlogo.png" alt="Test Image 2" style="float:left;" />
    <p>Test Text</p>
</div>

由于某种原因，<div> 周围的底部边框与图像等不齐。例如，我们得到这样的东西:

这不是图像或任何东西的问题(即图像文件中没有空格)。

通过添加 background-color:blue;到 <span>的 style属性，我们可以看到 span 似乎占用了额外的空间。

我尝试弄乱跨度的边距和填充，但无济于事。有谁知道发生了什么事吗？

Answer 1

确实很奇怪。

我发现通过删除跨度并简单地将图像向右浮动，它可以删除多余的空间。表明问题出在跨度内。

然后我看firebug，发现多余的空间被渲染成了height。

显然，空格是由一个杂散字符创建的(这很奇怪，因为如果您删除空格，该字符仍然存在...)，如 here 所示我将 font-size 设置为 0，空格消失了。

编辑

是的，问题肯定是假设有文本并将其与虚构文本对齐 (veritcal-align:baseline;) 定位图像，另一个解决方法是将图像与此文底部here .