Пример
Указывает высоту строки в процентах:<html>
<head>
<meta charset="utf-8" />
<style>
p.small { line-height:90%; }
p.big { line-height:200%; }
</style>
</head>
<body>
<p>
Этот параграф со страндартной высотой строки.
Высота строки по умолчанию в большинстве браузеров от 110% до 120%.
Этот параграф со страндартной высотой строки.
</p>
<p class="small">
Этот параграф с меньшей высотой строки.
Этот параграф с меньшей высотой строки.
Этот параграф с меньшей высотой строки.
</p>
<p class="big">
Этот параграф с большей высотой строки.
Этот параграф с большей высотой строки.
Этот параграф с большей высотой строки.
</p>
</body>
</html>
Определение и использование
Свойство line-height указывает высоту строки.
Примечание: Отрицательные значения запрещены.
| Значение по умолчанию: | normal |
|---|---|
| Унаследованный: | да |
| Версия: | CSS1 |
| Синтакс JavaScript: | object.style.lineHeight="2" |
Поддержка браузеров
Свойство line-height поддерживается во всех ведущих браузерах.
Примечание: Значение "inherit" не поддерживается в IE7 и более ранних версиях. IE8 требует !DOCTYPE. IE9 поддерживает "inherit".
Значения свойства
| Значение | Описание | Играйте |
|---|---|---|
| normal | Нормальная высота строки. Это по умолчанию | Играйте » |
| число | Число, который умножается на текущий размер шрифта, чтобы установить высоту строки | Играйте » |
| длина | Фиксированая высота строки в px, pt, cm, и т.д. | Играйте » |
| % | Высота строки в процентах от текущего размера шрифта | Играйте » |
| inherit | Указывает, что значение свойства line-height должно быть унаследовано от родительского элемента |
Больше примеров
Пример 2
Этот пример демонстрирует, как указать расстояние между строками в абзаце с использованием значения в пикселях.<html>
<head>
<meta charset="utf-8" />
<style>
p.small { line-height: 10px; }
p.big { line-height: 30px; }
</style>
</head>
<body>
<p>
Этот параграф со стандартной высотой строки.
Высота строки по умолчанию в большинстве браузеров около 20px.
Этот параграф со стандартной высотой строки.
Этот параграф со стандартной высотой строки.
</p>
<p class="small">
Этот параграф с меньшей высотой строки.
Этот параграф с меньшей высотой строки.
Этот параграф с меньшей высотой строки.
Этот параграф с меньшей высотой строки.
</p>
<p class="big">
Этот параграф с большей высотой строки.
Этот параграф с большей высотой строки.
Этот параграф с большей высотой строки.
Этот параграф с большей высотой строки.
</p>
</body>
</html>
Пример 3
Этот пример демонстрирует, как указать расстояние между строками в абзаце с использованием числового значения.<html>
<head>
<meta charset="utf-8" />
<style>
p.small { line-height: 0.5; }
p.big { line-height: 2; }
</style>
</head>
<body>
<p>
Этот параграф со стандартной высотой строки.
Высота строки по умолчанию в браузерах "1".
Этот параграф со стандартной высотой строки.
Этот параграф со стандартной высотой строки.
</p>
<p class="small">
Этот параграф с меньшей высотой строки.
Этот параграф с меньшей высотой строки.
Этот параграф с меньшей высотой строки.
Этот параграф с меньшей высотой строки.
</p>
<p class="big">
Этот параграф с большей высотой строки.
Этот параграф с большей высотой строки.
Этот параграф с большей высотой строки.
Этот параграф с большей высотой строки.
</p>
</body>
</html>
Была ли эта информация полезной?
