Warning: Cannot use a scalar value as an array in /home/admin/public_html/forum/include/fm.class.php on line 757

Warning: Invalid argument supplied for foreach() in /home/admin/public_html/forum/include/fm.class.php on line 770
Форумы портала PHP.SU :: Версия для печати :: Вертикальное выравнивание в строке
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS » Вертикальное выравнивание в строке

Страниц (1): [1]
 

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

высота строкового блока
->
http://jsfiddle[dot]net/x89HM/1/
3. Pavelbeginner - 28 Июля, 2014 - 18:02:16 - перейти к сообщению
DelphinPRO пишет:
Pavelbeginner пишет:
высота строкового блока

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

Да, высота строкового блока, как видно из вашего примера, зависит лишь от line-height. Однако, если убрать "vertical-align:top;", то на высоту линейного блока, внутри которого находится этот самым строковый блок, окажет влияние не line-height строкого блока, а его font-size. Почему?
4. DelphinPRO - 28 Июля, 2014 - 20:05:53 - перейти к сообщению
vertical-align там только для наглядности, в противном случае, блоки, по умолчанию, выровняются по базовой линии шрифта. Высота их всё же останется равной line-height, что наглядно видно, благодаря раскрашенному фону.
5. Pavelbeginner - 29 Июля, 2014 - 10:21:43 - перейти к сообщению
DelphinPRO пишет:
vertical-align там только для наглядности, в противном случае, блоки, по умолчанию, выровняются по базовой линии шрифта. Высота их всё же останется равной line-height, что наглядно видно, благодаря раскрашенному фону.
В таком случае, если высота блоков "всё же останется равной line-height", то почему линейный блок, в котором находятся строчные блоки, увеличивается при увеличение значения font-size строкового блока?
6. DelphinPRO - 29 Июля, 2014 - 11:12:42 - перейти к сообщению
нифига не понял Улыбка покажи на картинках Улыбка
(Добавление)
если ты про внешний блок, то он не увеличивается
http://jsfiddle[dot]net/x89HM/6/
(Добавление)
Вообще рекомендую прочитать книгу "ИКФ - инлайновый контекст форматирования" (книга электронная, бесплатная)
Там все довольно подробно описано про инлайновые элементы
7. Pavelbeginner - 30 Июля, 2014 - 18:00:56 - перейти к сообщению
DelphinPRO пишет:
нифига не понял Улыбка покажи на картинках Улыбка
(Добавление)
если ты про внешний блок, то он не увеличивается
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, то высота линейного блока от этого не увеличится, а лишь букву начнут залазить на другие линейные блоки.

Книгу я читал, но там оочень много, поэтому перечитывать - это как крайний вариант, если не выясню так от людей.
8. IllusionMH - 30 Июля, 2014 - 22:58:12 - перейти к сообщению
Pavelbeginner, повторяем фокус который показывал DelphinPRO
делаем строковый блок http://jsfiddle[dot]net/acSfa/1/ - как видно - высота блока 20px, символ выпирает, верхняя часть символа перекрывает две строки выше.
Выравнивание идет по baseline, а это основание буквы h, поэтому следующий элемент и перенос строки выравниваются по основанию h, поэтому нижние строки не перекрываются.
Меняем выравнивание для этого строкового блока на middle http://jsfiddle[dot]net/acSfa/2/ и теперь нижняя часть буквы лежит под строками ниже.
Я себе это представляю так.
9. DelphinPRO - 30 Июля, 2014 - 23:18:59 - перейти к сообщению
Сдается мне, произошла некоторая путаница в терминологии )
Есть три типа элементов - блочные (block), строчные (inline) и строчные блоки (inline-block), которые сочетают свойства первых двух. Для строчных элементов высота не задается, она будет равна высоте шрифта (со всеми его выносными элементами). Для блочных элементов (и строчных блоков) высота не будет превышать line-height.
10. Pavelbeginner - 31 Июля, 2014 - 10:08:41 - перейти к сообщению
DelphinPRO пишет:
Сдается мне, произошла некоторая путаница в терминологии )
Есть три типа элементов - блочные (block), строчные (inline) и строчные блоки (inline-block), которые сочетают свойства первых двух. Для строчных элементов высота не задается, она будет равна высоте шрифта (со всеми его выносными элементами). Для блочных элементов (и строчных блоков) высота не будет превышать line-height.

Тут вы не правы, есть и 4-ый тип блоков, доступ к которым нельзя получить, но они есть - это линейные блоки, они не видимы, не имеют значений фона, границ и т.д. Линеный блок - это каждая новая строка.
11. DelphinPRO - 31 Июля, 2014 - 10:14:24 - перейти к сообщению
Блин, как же я про него забыл... Еще и книжку советовал Улыбка
да, был не прав.

 

Powered by ExBB FM 1.0 RC1