Почему vertical-align работает только при задании размера шрифта родителю?

Question

[Senseich]

Всем привет! Продолжаю разбираться в тонкостях различных свойств ) Не всегда точно понимал как работает vertical-align. Вот к примеру я взял блок и в него поместил текст. Как сказано в спецификации, применяю стили к строчному элементу, но текст никак не реагирует на значения vertical-align.
Вот для наглядности: https://jsfiddle.net/hbw6ncfx/15/

А если шрифт задать не самому тексту, а родителю, то vertical-align работает: https://jsfiddle.net/hbw6ncfx/18/

Получается, что при задании блоку размера шрифта, у этого блока появляется своя базовая линия.
В чем такая особенность?

Answer 1

[Максим]

у вас ни первый пример не работает

и второй тоже

Comments

[Senseich]

Максим Ленский, ну вот для наглядности черту провел:

1) https://jsfiddle.net/hbw6ncfx/41/

2) https://jsfiddle.net/hbw6ncfx/42/

У меня так:
1)

2)

Answer 2

[Tishinskiy]

Особенности в теории относительности ))
Verical-align для блочных элементов работает относительно "базовой линии" родителя. И для того чтобы этим параметром пользоваться родителю нужно задавать не font-size, а line-height

.box {
	border: 1px solid red;
	height: 100px;
  line-height: 100px;	
}

span {
	vertical-align: middle;
	font-size: 20px;
}

Подробнее о vertical-align

Comments

[Senseich]

Tishinskiy, про line-height я знаю, но как видите, с font-size тоже заметны небольшие изменения. Вот мне и стало интересно, почему так происходит )
И ещё вы пишите

Verical-align для блочных элементов работает относительно "базовой линии" родителя

Verical-align для блочных элементов вообще не работает, я его применил к строчному, который внутри блочного )