Почему эти элементы с display: inline-block не выровнены правильно?

Question

У меня есть ссылка с display, установленным на inline-block, и рядом с ней <div> с той же высотой. Тем не менее, <div> почему-то выглядит смещенным вниз, и я не уверен, почему.

Вот jsFiddle: http://jsfiddle.net/2bWjx/1/

Что происходит

#stats (серый) выглядит ниже, чем a.sector one-letter.

Что я хочу, чтобы произошло

#stats должен быть одинаково установлен (верх и низ в одной точке) как a.sector one-letter.

Я некоторое время боролся с этим и мог бы помочь. Должно быть простое исправление!

Заранее спасибо за любую помощь!

Answer 1

Вам нужно добавить vertical-align: top к тому, что имеет display: inline-block.

См .: http://jsfiddle.net/thirtydot/2bWjx/2/

По умолчанию vertical-align равно baseline, что вызывает проблему, с которой вы сталкиваетесь.

Здесь вы можете увидеть разницу между различными возможными значениями: http://www.brunildo.org/test/inline-block.html