11

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!

thirtydot
  • 224,678
  • 48
  • 389
  • 349
element119
  • 7,475
  • 8
  • 51
  • 74
  • Possible duplicate of [CSS Inline-Block Elements Not Lining Up Properly](http://stackoverflow.com/q/19366401/1529630) (this question is older but the other is more 'popular'). – Oriol Aug 06 '15 at 00:32

1 Answers1

25

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

thirtydot
  • 224,678
  • 48
  • 389
  • 349