По моему опыту, общая высота строки по умолчанию кажется близкой к 1,2 (это будет ~ 19px для шрифта 16px (16 * 1.2)). В некоторых версиях браузеров он составляет около 1,1, но я не помню, чтобы когда-либо видел его за пределами этой области.
Свойство line-height наследуется от родителя к потомку - поэтому указание line-height в <body> повлияет на все элементы на странице, кроме те, которые имеют собственное свойство line-height множество и их потомки. (См. Пример ниже)
Высота строки влияет на высоту, занимаемую каждым символом - так что да, это также влияет на элементы из одной строки текста.
Line-height выпускается в трех основных вариантах:
- «относительный» / «безразмерный» (например,
1.2)
- «фиксированный» (например,
14px)
- «фиксированный относительный» (например,
1.2em)
Относительные (безразмерные) значения будут применять пропорционально эквивалентную высоту строки ко всем элементам в зависимости от их размера шрифта.
Между тем, фиксированные значения (px) не меняются в зависимости от размера шрифта.
Для объяснения варианта «фиксированный относительный» (значения «em») обратитесь к сообщению Эрика Мейера в блоге « Unitless Line-Heights ».
Каждый аромат имеет свое место в мире. : -)
Вот краткий пример всех трех:
body {
font-size: 12px;
line-height: 1.5;
}
small {
font-size: 10px;
}
div {
line-height: 21px;
}
p {
line-height: 2em;
}
...
<body>
one
<small>two</small>
<div>
three
<small>four</small>
</div>
<p>
five
<small>six</small>
</p>
</body>
Каждое слово в приведенном выше примере будет иметь следующие значения высоты строки (переведено в px)
- 'one' == 18px (в 1,5 раза больше 12px
font-size из body)
- 'two' == 15px (в 1,5 раза больше 10px
font-size из small)
- 'three' == 21px (фиксированное
px значение)
- 'four' == 21px (наследует фиксированное значение
px от div)
- 'Five' == 24px (в 2 раза больше 12px
font-size из p (наследуется от body))
- 'six' == 24px (наследует (фиксированное) предварительно вычисленное значение от
p)