Html 图像后的文本与简单文本具有不同的垂直坐标

我尝试显示两个水平块。一个包含图像和文本，第二个仅包含文本。文本应垂直对齐。守则：

问题是第一个块中文本的Y坐标比第二个块中文本的Y坐标大一到两个像素。Chrome、FF、IE的结果相同：

我的错在哪里

HTML:

---

在不使用负边距或任何沿着这些线的方法的情况下，一种可能的解决方案是使用元素包装文本，然后应用垂直对齐：中间对齐

---

值得注意的是，内联元素尊重标记中的空格，因此如果存在空格，您将得到如下结果。显然，您应该避免这样做。

如果不使用负边距或沿这些行的任何内容，一种可能的解决方案是使用元素包装文本，然后应用垂直对齐：中间对齐

---

值得注意的是，内联元素尊重标记中的空格，因此如果存在空格，您将得到如下结果。显然，你应该避免那样做。

谢谢！我还发现了存在的相关问题：谢谢！我还发现了存在的相关问题：

<div id="text-with-image">
    <img src="http://placehold.it/48x48" width="48" height="48" />First
</div>
<div id="text">
    Second
</div>

#text-with-image,
#text {
    height: 48px;
    vertical-align: middle;
    display: table-cell;
    border: solid;
    text-decoration: underline;
}

img {
    vertical-align: middle;
}

<div id="text-with-image">
    <img src="http://placehold.it/48x48" width="48" height="48" /><span>First</span>
</div>

#text-with-image > span {
    vertical-align:middle;
}