Css 浮动元素跨越添加空间

我有如下代码：

<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>

测试文本

由于某些原因，

周围的底部边框与图像不齐平，等等。例如，我们得到如下结果：

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

通过添加

背景色：蓝色

对于

的

style

属性，我们可以看到跨度似乎占用了额外的空间

我试着弄乱跨度的边距和填充物，但没有用。有人知道发生了什么事吗？

确实很奇怪

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

然后我看了看firebug，发现额外的空间是渲染高度

很明显，空格是由一个散乱的字符创建的（这很奇怪，因为如果删除空格，该字符仍然存在…），正如我将字体大小设置为0，空格消失时所示

编辑

---

是的，问题很明确，图像定位时假设存在文本，并将其与imagarinary文本对齐（

Verical align:baseline；

）另一个修复方法是将图像与此文本的底部对齐。

请举例说明抱歉，不知怎的，我错过了大的代码块…你不能放弃这个跨度，因为它什么都不做吗？我猜示例代码中的跨度似乎毫无意义，但我的代码需要它（它要复杂得多）。是空白字符吗？

字体大小：0px工作，但
垂直对齐：基线没有（至少对我来说）。谢谢+1Baseline在ff8.0.1上工作，它不是一个空格字符，这正是困扰我的原因…我在检查Chrome。你知道那是什么角色吗？