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

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

высота строкового блока
->
http://jsfiddle[dot]net/x89HM/1/

-----
Чем больше узнаю, тем больше я не знаю.

Да, высота строкового блока, как видно из вашего примера, зависит лишь от line-height. Однако, если убрать "vertical-align:top;", то на высоту линейного блока, внутри которого находится этот самым строковый блок, окажет влияние не line-height строкого блока, а его font-size. Почему?

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

-----
Чем больше узнаю, тем больше я не знаю.

В таком случае, если высота блоков "всё же останется равной line-height", то почему линейный блок, в котором находятся строчные блоки, увеличивается при увеличение значения font-size строкового блока?

нифига не понял покажи на картинках
(Добавление)
если ты про внешний блок, то он не увеличивается
http://jsfiddle[dot]net/x89HM/6/
(Добавление)
Вообще рекомендую прочитать книгу "ИКФ - инлайновый контекст форматирования" (книга электронная, бесплатная)
Там все довольно подробно описано про инлайновые элементы

-----
Чем больше узнаю, тем больше я не знаю.

Вот тут нагляднее будет http://jsfiddle[dot]net/acSfa/
Каждая строка - это линейный блок, внутри которого находятся строковые блоки, в данном случае строковые блоки это "<span class="text1">world</span>" и "<span class="text">h</span>". В css документацие сказано, что высота линейного блока зависит ТОЛЬКО от значения line-height строковых блоков, которые находятся внутри линейного блока. В моем же примере высота линейного блока, который содержит строковый блок "<span class="text">h</span>" зависит от свойства font-size блока "<span class="text">h</span>", хотя документация говорит, что в случае, если font-size больше, чем line-height, то высота линейного блока от этого не увеличится, а лишь букву начнут залазить на другие линейные блоки.

Книгу я читал, но там оочень много, поэтому перечитывать - это как крайний вариант, если не выясню так от людей.

(Отредактировано автором: 30 Июля, 2014 - 18:15:11)

Pavelbeginner, повторяем фокус который показывал DelphinPRO
делаем строковый блок http://jsfiddle[dot]net/acSfa/1/ - как видно - высота блока 20px, символ выпирает, верхняя часть символа перекрывает две строки выше.
Выравнивание идет по baseline, а это основание буквы h, поэтому следующий элемент и перенос строки выравниваются по основанию h, поэтому нижние строки не перекрываются.
Меняем выравнивание для этого строкового блока на middle http://jsfiddle[dot]net/acSfa/2/ и теперь нижняя часть буквы лежит под строками ниже.
Я себе это представляю так.

Сдается мне, произошла некоторая путаница в терминологии )
Есть три типа элементов - блочные (block), строчные (inline) и строчные блоки (inline-block), которые сочетают свойства первых двух. Для строчных элементов высота не задается, она будет равна высоте шрифта (со всеми его выносными элементами). Для блочных элементов (и строчных блоков) высота не будет превышать line-height.

-----
Чем больше узнаю, тем больше я не знаю.

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

(Отредактировано автором: 31 Июля, 2014 - 10:09:39)

Блин, как же я про него забыл... Еще и книжку советовал
да, был не прав.

-----
Чем больше узнаю, тем больше я не знаю.