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?


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


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

img {
  vertical-align: middle;


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>


#text-with-image > span {

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