Почему не работает vertical-align?

Question

[Ivanushka255]

Почему vertical-align: top/bottom работают только с прописанным line-height. НО без него отлично работают text-top/text-bottom/middle. Чем можно объяснить такое поведение?
Вот – https://codepen.io/Van245/pen/yLOyjaw?editors=1100

Answer 1

[Арсений Матыцин]

Потому что свойств немного больше, чем хотелось бы. И типографика в вебе = боль. Это видно по инверсии примера.

Comments

[Ivanushka255]

То, что "типографика в вебе – боль" это я уже чувствую...
Слушай, у меня еще вот такой вопрос. Если не трудно, помоги. Хочу все-таки доразобрать это свойство.
Почему у меня vertical-align: text-top показывает текст снизу, а вот vertical-align: text-bottom наоборот – вверху?
Вот – https://codepen.io/Van245/pen/yLOyjaw?editors=1100

[Арсений Матыцин]

Ivanushka255, в профиле ссылка на чат, там где-то есть я. Через несколько дней у меня закончится температурное гонево и я смогу вникнуть в соль.

[Ivanushka255]

Арсений Матыцин спасибо, разобрался. Там дело было в том, что если элемент является текстом, то в таком случае vertical-align считается с учетом line-height. Поэтому и создается эффект, что текст едет вниз