html - Why are inline block elements misaligned?

Question

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 I do and what I try, the elements are MISALIGNED as shown on picture below. What is wrong and how can I fix this?

This problem occurs in every browser - FF, IE, Safari ... http://jsfiddle.net/CaU59/

Answer 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/