Text after image has different vertical coordinate than simple text

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:

CSS Vertical align issue

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

solution

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