Значение по умолчанию для высоты строки, если размер шрифта 100%
Я должен переопределить стиль тела моей страницы:
body{
font-size:14px;
line-height:20px;
}
Переопределение:
body{
font-size:100%;
line-height:?????;
}
Что такое defualt значение свойства line-height
, если я указал font-size:100%
?
Существует ли строгая связь между этими свойствами?
Ответы
Ответ 1
Значение по умолчанию line-height
normal
, поэтому используйте:
body {
font-size: 100%;
line-height: normal;
}
FYI, вы можете подтвердить это, если у вас есть Chrome, открыв веб-сайт, проверив элемент <body>
и просмотрев унаследованные вычисленные стили.
Ответ 2
Задайте единичное значение 1
, которое умножит вычисленный размер шрифта (т.е. насколько большой шрифт окажется равным) с 1, делая для достаточно высокой высоты линии.
Вы также можете использовать 1.5
для немного большего расстояния.
Итак, чтобы закончить код, это будет
body{
font-size:100%;
line-height: 1.5;
}
Подробнее см. в разделе https://developer.mozilla.org/en-US/docs/CSS/line-height. Использование единичного числа указывается как предпочтительный способ установки высоты линии.
Ответ 3
Высота строки по умолчанию составляет примерно ~ 1.1em (см. здесь).
Однако вы можете изменить соотношение между высотой линии и размером шрифта, используя, например:
body {
font: 100%/1.618;
}
Чтобы более подробно рассмотреть взаимосвязь между высотой линии и размером шрифта, хорошим местом для начала будет:
http://demosthenes.info/blog/606/Molten-Leading-Exploring-The-CSS-Relationship-Between-Font-Size-Line-Height-and-Margin
Ответ 4
Вы можете использовать относительный line-height
Если ваши первоначальные размеры были font-size:14px;
и line-height:20px;
, и вы хотите сохранить одинаковые пропорции, вы можете использовать 1 * (20/14) em, поэтому line-height:1.42em;
body{
font-size:100%;
line-height:1.42em;
}
Ответ 5
Значение
normal
Зависит от агента пользователя. Настольные браузеры (включая Firefox) используют значение по умолчанию 1.2
, в зависимости от элемента font-family
.
...
https://developer.mozilla.org/en-US/docs/Web/CSS/line-height#Values