Inline-block с текстом «выпадает» на новую строку. Причина и как исправить?

Question

[Maslaev]

Div с параметром display: Inline-block с текстом выпадает из потока вниз, а надо чтобы он оставался на линии с остальными блоками. В чем причина? codepen.io/Gaxak/pen/mAByRL

Answer 1

[Владислав]

vertical-align:top;

Comments

[Maslaev]

Спасибо!

[Maslaev]

Maslaev: а можете для справки написать, почему при добавлении текста в inline-block происходит такая петрушка?

[Владислав]

Maslaev: Так работает свойство. Добавлять vertical-align нужно всегда! Т.к по умолчанию оно установленно на: baseline.