html - Why aren't these elements with display:inline-block properly aligned?

Question

I have a link with display set to inline-block, and next to it is a <div> with the same height. However, the <div> is somehow appearing offset downwards, and I'm not sure why.

Here's a jsFiddle: http://jsfiddle.net/2bWjx/1/

What's happening

#stats (grey) is appearing lower down than a.sector one-letter.

What I want to happen

#stats should be equally set (top and bottom at the same point) as a.sector one-letter.

I've been struggling with this for a while, and could use some help. Should be a simple fix!

Thanks for any help in advance!

Answer 1

You need to add vertical-align: top to whatever has display: inline-block.

See: http://jsfiddle.net/thirtydot/2bWjx/2/

The default vertical-align is baseline, which causes the problem you're seeing.

You can see the difference between the various possible values here: http://www.brunildo.org/test/inline-block.html