Почему при добавлении текста inline-block элементу он выбивается из очереди?

Question

[МолодойПрограммер]

Блокам задано лишь свойство дисплей, размеры и небольшой отступ, однако при добавлении текста одному из них, он выбивается из общего ряда

Решено:

Comments

[Ankhena]

По умолчанию у инлайн-блоков выравнивание по базовой линии шрифта.
Вот они и выровнялись.
Если текст будет во всех, то картина изменится.
Инлайн блокам всегда нужно указывать vertical-aligh в явном виде.

Answer 1

[iBird Rose]

потому что ты не указал vertical-align. а по дефолту это baseline. в двух словах он может вести себя вообще не предсказуемо. причем даже в разных браузерах по разному. в общем просто задай нужный vertical-align

Comments

[Сергей delphinpro]

Вполне предсказуемо - по базовой линии последней строки текста.

Answer 2

[UthvfyV]

в стиль дива надо добавить vertical-align: top; или наоборот bottom. Однако если указан float: left или right то свойство vertical-align будет игнорироваться. Если где-то есть намёки на float, то для страховки надо прописывать float: none; А если не реагирует можно добавить !important, float: none !important; Но лучше !important не ставить, только по необходимости.