Гость
Войти | Профиль | Очистить
Целевая тема:
Создать новую тему:
Автор:
Действия ...
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / line-height. А разве оно в полной мере не перекрывается, как например font-size? / 8 сообщений из 8, страница 1 из 1
24.04.2014, 11:07
    #38624172
Програмёр
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
line-height. А разве оно в полной мере не перекрывается, как например font-size?
Всем привет.

Пришлось углубиться в вёрстку... Давно не верстал. Да и вообще line-height в виде множителя никогда не юзал... а тут пришлось чужую вёрстку править и понеслась!!! :(

В общем, мне хром светит в отладчике (как и iceweasel (аналог firefox)), что line-height перекрыто... Но оно не перекрыто.
Изменение этого свойства у элемента-родителя ведёт к изменению высоты строки в child'е:

Код: html
1.
2.
3.
<span style="line-height: 1.5">
  <span style="line-height: 13px; font-size:13px;">123123123<br>123123123</span>
</span>



То есть при выставлении line-height: 13px я получаю высоту никак не в 13px, а где-то в 20 пикселей :)

Подскажите, это так и должно работать? или это какой-то косяк (причём что в chrome, что в firefox - ровно одинаково)... или мне руки ровнять надо?

P.S. сайт писан в doctype html (ну то есть html5). Но в принципе это не важно, так как я пробовал и в transitional то же изобразить... точно то же получил.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.04.2014, 12:01
    #38624293
user89
user89
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
line-height. А разве оно в полной мере не перекрывается, как например font-size?
Програмёр,

???
Код: html
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
span {
	display:block;
}
</style>
</head>
<body>
<span style="line-height: 2.5">
  <span style="line-height:13px; font-size:13px;">123123123<br>123123123</span>
</span>
</body>
</html>
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.04.2014, 12:15
    #38624333
Програмёр
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
line-height. А разве оно в полной мере не перекрывается, как например font-size?
user89,

да, display: block исправляет ситуацию... НО!!!
Я же не могу все inline элементы делать блочными... ну так... на всякий случай :)

За предложенный вариант спасибо.... но это не исправление ситуации, а просто костыль, что бы скрыть косяк :)) приблизительно похожим костылём я сделал и на требуемом сайте. но хотелось бы понять эту мистику свойства line-height.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.04.2014, 12:17
    #38624336
Програмёр
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
line-height. А разве оно в полной мере не перекрывается, как например font-size?
методом тыка определил, что применяется большее из значений :) то есть если у вложенного span выставить множитель в 10, то будет применён именно он.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.04.2014, 14:33
    #38624655
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
line-height. А разве оно в полной мере не перекрывается, как например font-size?
ПрограмёрТо есть при выставлении line-height: 13px я получаю высоту никак не в 13px, а где-то в 20 пикселей :)

Подскажите, это так и должно работать?
Да, так и должно быть по логике вещей. Т.к. межстрочный интервал не может быть другим у встроеного "строчного" элемента.
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.04.2014, 14:51
    #38624708
Програмёр
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
line-height. А разве оно в полной мере не перекрывается, как например font-size?
krvsaПрограмёрТо есть при выставлении line-height: 13px я получаю высоту никак не в 13px, а где-то в 20 пикселей :)

Подскажите, это так и должно работать?
Да, так и должно быть по логике вещей. Т.к. межстрочный интервал не может быть другим у встроеного "строчного" элемента.

блин :) а ведь точно... спасибо... я что-то не подумал.

Код: html
1.
2.
3.
<span style="line-height: 1.5">
  456<span style="line-height: 13px; font-size:13px;">123123123<br>123123123</span>456
</span>



Если бы что-то работало иначе, то такой код сделал бы "123123123" надстрочными относительно "456".

Хотя мне такая логика поведения нравится. Это было бы очень даже прикольно... и сильно помогло бы в формировании разных надстрочных и индексных значений :) И многого другого :)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.04.2014, 16:42
    #38624925
krvsa
krvsa
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
line-height. А разве оно в полной мере не перекрывается, как например font-size?
Програмёр
Код: html
1.
2.
3.
<span style="line-height: 1.5">
  456<span style="line-height: 13px; font-size:13px;">123123123<br>123123123</span>456
</span>



Если бы что-то работало иначе, то такой код сделал бы "123123123" надстрочными относительно "456".

Хотя мне такая логика поведения нравится. Это было бы очень даже прикольно... и сильно помогло бы в формировании разных надстрочных и индексных значений :) И многого другого :)
Для этого можно использовать
Код: css
1.
position: relative;


и уже потом двигать/смещать элемент куда нужно...
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
24.04.2014, 17:09
    #38624965
Програмёр
Програмёр
Участник
Скрыть профиль Поместить в игнор-лист Сообщения автора в теме
line-height. А разве оно в полной мере не перекрывается, как например font-size?
krvsaПрограмёр
Код: html
1.
2.
3.
<span style="line-height: 1.5">
  456<span style="line-height: 13px; font-size:13px;">123123123<br>123123123</span>456
</span>



Если бы что-то работало иначе, то такой код сделал бы "123123123" надстрочными относительно "456".

Хотя мне такая логика поведения нравится. Это было бы очень даже прикольно... и сильно помогло бы в формировании разных надстрочных и индексных значений :) И многого другого :)
Для этого можно использовать
Код: css
1.
position: relative;


и уже потом двигать/смещать элемент куда нужно...

Это мы знаем ;)
...
Рейтинг: 0 / 0
| Ответить | Цитировать | Написать  
Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / line-height. А разве оно в полной мере не перекрывается, как например font-size? / 8 сообщений из 8, страница 1 из 1
Найденые пользователи ...
Разблокировать пользователей ...
Читали тему (0):
Читали форум (0):
Пользователи онлайн (0):
Польз. соглашение  
Полит. конфиден.  
созд. / загр.: 479ms
Закрыть
start [/forum/topic.php?fid=22&tablet=1&tid=1447160]:
 0ms
get settings:
 7ms
get forum list:
 14ms
check forum access:
 3ms
check topic access:
 3ms
track hit:
 151ms
get topic data:
 12ms
get forum data:
 3ms
get page messages:
 57ms
get tp. blocked users:
 1ms
others: 228ms
total:  479ms
x
x
Закрыть


Просмотр
0 / 0
Close
Debug Console [Select Text]