Почему inline-block смещает элемент без текста?

Question

[Дмитрий Петров]

Одинаковый класс для двух div в режиме inline-block.
Почему правый div с содержимым смещен относительно верхней кромки вниз?
Если в левый div подставить текст - правый div сразу же выравнивается по верхней кромке.
Как это описано в стандарте?

https://jsfiddle.net/Sellec/rvqt9y0s/12/

Answer 1

[tyzberd]

добавьте vertical-align: middle;
а лучше используйте flex
https://css-live.ru/articles/obzor-inlajnovyj-kont...

Comments

[Дмитрий Петров]

Спасибо. В принципе, уже натолкнулся на объяснение на stackoverflow и увидел, что все js-компоненты вместе с display:inline-block используют vertical-align: middle;