浮动元素跨度添加空间

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>的{​​{1}}属性，我们可以看到跨度似乎占用了额外的空间。

我试图弄乱跨度的边距和填充无济于事。有没有人知道发生了什么？

Answer 1

确实非常奇怪。

我发现通过移除跨度并简单地浮动图像，它会移除额外空间。表明问题是在跨越。

然后我看着萤火虫，发现额外的空间呈现高度。

显然空间是由一个流浪角色创造的（这很奇怪，因为如果删除空格，角色仍然在那里......），如所示here，我将font-size转为0和空格走了。

修改

是的，问题绝对是图像的位置假设有文本并将其与成像文本对齐（veritcal-align:baseline;）另一个修复方法是将图像与此文本的底部对齐{{3 }}