Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 28.07.2014, 17:57
Кандидат Javascript-наук
Отправить личное сообщение для FanAizu Посмотреть профиль Найти все сообщения от FanAizu
 
Регистрация: 08.03.2011
Сообщений: 148

Вертикальное выравнивание в строке
есть пример http://jsfiddle.net/x89HM/
также в css 2.1 документацие сказано: "Если значение свойства 'line-height' меньше высоты содержимого, то в итоге высота строкового блока будет меньше размера шрифта, а отображаемые глифы "расплывутся" за пределы этого блока. Если такой блок соприкасается с краями линейного блока, то отображаемые глифы могут также "наплывать" на границы смежного линейного блока."
Скажите в таком случае, пожалуйста, почему в моем примере значение свойства font-size у элемента с классом .text влияет на высоту этогоже элемента и как результат на высоту строчного блока, внутри которого находится этот элемент? Ведь из документации явно следует, что высота строчного элемента зависит ТОЛЬКО от значения line-height, а если font-size больше, чем line-height, то текст просто вылазит за пределы элемента, но при этом не влияет на его высоту.
В моем же примере, чем больше задавать значение font-size для элемента с классом .text, тем больше высота этого элемента.
Ответить с цитированием
  #2 (permalink)  
Старый 28.07.2014, 19:02
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 19.01.2010
Сообщений: 354

Очень странно. У меня в примере попроще, все ок:
http://jsfiddle.net/ainop/fGu9K/
Ответить с цитированием
  #3 (permalink)  
Старый 28.07.2014, 19:05
Кандидат Javascript-наук
Отправить личное сообщение для FanAizu Посмотреть профиль Найти все сообщения от FanAizu
 
Регистрация: 08.03.2011
Сообщений: 148

Сообщение от ixth Посмотреть сообщение
Очень странно. У меня в примере попроще, все ок:
http://jsfiddle.net/ainop/fGu9K/
пример не работающий(font-size не применяется к первой букве) и не объясняет поведение из моего примера
Ответить с цитированием
  #4 (permalink)  
Старый 28.07.2014, 19:30
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 19.01.2010
Сообщений: 354

Пардон, неправильная ссылка. Вот: http://jsfiddle.net/ainop/fGu9K/1/
"h" вылезает за края блока.
Ответить с цитированием
  #5 (permalink)  
Старый 28.07.2014, 19:42
Кандидат Javascript-наук
Отправить личное сообщение для FanAizu Посмотреть профиль Найти все сообщения от FanAizu
 
Регистрация: 08.03.2011
Сообщений: 148

Сообщение от ixth Посмотреть сообщение
Пардон, неправильная ссылка. Вот: http://jsfiddle.net/ainop/fGu9K/1/
"h" вылезает за края блока.
Вылезать-то вылезает, но при увеличение размера шрифта для этой буквы - увеличивается и линейный блок, а такого быть, судя по документации, не должно.
Ответить с цитированием
  #6 (permalink)  
Старый 28.07.2014, 22:01
Аватар для ixth
Профессор
Отправить личное сообщение для ixth Посмотреть профиль Найти все сообщения от ixth
 
Регистрация: 19.01.2010
Сообщений: 354

Уф. В общем, нашел что-то про инлайновый контекст форматирования, но не вкурил. Там, кажется, описан случай, когда элемент с большим font-size растягивает инлайн-бокс: http://meyerweb.com/eric/css/inline-format.html
Ответить с цитированием
  #7 (permalink)  
Старый 30.07.2014, 18:06
Аспирант
Отправить личное сообщение для Ленча Посмотреть профиль Найти все сообщения от Ленча
 
Регистрация: 13.07.2014
Сообщений: 78

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
вертикальное выравнивание torsar (X)HTML/CSS 1 29.03.2013 01:11
вертикальное выравнивание torsar (X)HTML/CSS 3 28.03.2013 19:53
Вертикальное выравнивание текста внутри select'а dr_gluk (X)HTML/CSS 4 16.12.2011 16:54
Вертикальное выравнивание в блоках greatilya (X)HTML/CSS 2 09.09.2010 13:51
вертикальное выравнивание micscr (X)HTML/CSS 1 16.01.2010 13:50