Text after image has different vertical coordinate than simple text

Question

I try to display two horizontal blocks. One with image and text, second - with text only. Text should be aligned vertically. The code: http://jsfiddle.net/buDrY/

The problem is that Y coordinate of text in the first block is one or two pixels greater then Y of text in the second block. The result is the same in Chrome, FF, IE:

Where is my mistake?

HTML:

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

CSS:

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

img {
    vertical-align: middle;
}

Answer 1

Without resorting to negative margins or anything along those lines, one possible solution would be to wrap the text with a <span> element, and then applying vertical-align:middle.

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

UPDATED EXAMPLE HERE

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

It's worth noting that inline elements respect whitespace in the markup, therefore if a space is present, you will get results like this. You would obviously just avoid doing that..