Why Are Inline Block Elements Misaligned?

Inside a div with vertical-align: top; I have two elements, an img and a span (with aaa inside). Both elements have display: inline-block; and width and height set. No matter what

Solution 1:

You need to add vertical-align to the elements themselves, not their container. They are currently aligned baseline as you can see from the text lining up with the image.

http://jsfiddle.net/CaU59/2/

Solution 2:

vertical-align: top is to be added to each element

DEMO http://jsfiddle.net/CaU59/1/