Вертикальное выравнивание в строке
 

есть пример http://jsfiddle.net/x89HM/
также в css 2.1 документацие сказано: "Если значение свойства 'line-height' меньше высоты содержимого, то в итоге высота строкового блока будет меньше размера шрифта, а отображаемые глифы "расплывутся" за пределы этого блока. Если такой блок соприкасается с краями линейного блока, то отображаемые глифы могут также "наплывать" на границы смежного линейного блока."
Скажите в таком случае, пожалуйста, почему в моем примере значение свойства font-size у элемента с классом .text влияет на высоту этогоже элемента и как результат на высоту строчного блока, внутри которого находится этот элемент? Ведь из документации явно следует, что высота строчного элемента зависит ТОЛЬКО от значения line-height, а если font-size больше, чем line-height, то текст просто вылазит за пределы элемента, но при этом не влияет на его высоту.
В моем же примере, чем больше задавать значение font-size для элемента с классом .text, тем больше высота этого элемента.

Очень странно. У меня в примере попроще, все ок:
http://jsfiddle.net/ainop/fGu9K/

пример не работающий(font-size не применяется к первой букве) и не объясняет поведение из моего примера

Пардон, неправильная ссылка. Вот: http://jsfiddle.net/ainop/fGu9K/1/
"h" вылезает за края блока.

Вылезать-то вылезает, но при увеличение размера шрифта для этой буквы - увеличивается и линейный блок, а такого быть, судя по документации, не должно.

Уф. В общем, нашел что-то про инлайновый контекст форматирования, но не вкурил. Там, кажется, описан случай, когда элемент с большим font-size растягивает инлайн-бокс: http://meyerweb.com/eric/css/inline-format.html

Дело в том, что span - это строчный элемент. А то, что Вы приводите из спецификации - это для блочных элементов. Задайте span display:block - и все будет как в спецификации.