html.okpython.net
Основы создания сайтов
CSS :: Свойство line-height
css-свойство line-height (от англ. line height – высота строки) используется для установки межстрочного интервала (расстояния между строками).
Характеристики
- Значение по умолчанию: normal.
- Применяется: ко всем элементам.
- Наследуется: да.
- Анимируется: да.
- JavaScript: object.style.lineHeight="value".
Синтаксис
line-height: <множитель> | <размер> | <проценты> | normal
Значения
- normal – используется стандартный в данной ситуации межстрочный интервал, который в зависимости от браузера составляет около 120-125% от текущего размера шрифта.
- множитель – представляет собою число, на которое будет умножен текущий размер шрифта для определения межстрочного интервала.
- размер – задает расстояние между строк в любых единицах измерения (смотреть), использующихся в CSS.
- проценты – размер межстрочного интервала определяется в процентах от текущего размера шрифта.
Следует отметить, что отрицательные значения межстрочного интервала не допускаются, а его отсчет ведется от базовой линии шрифта.
Ссылки
Официальный сайт W3C: https://drafts.csswg.org/css2/visudet.html#propdef-line-height
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/line-height
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ margin: 5em; } .p_1{ line-height: 2.5em; } .p_2{ line-height: 2.5; } .p_3{ line-height: 250%; } </style> </head> <body> <p> line-height: normal<br> Вторая строка абзаца<br> Третья строка абзаца </p> <p class="p_1"> line-height: 2.5em<br> Вторая строка абзаца<br> Третья строка абзаца </p> <p class="p_2"> line-height: 2.5<br> Вторая строка абзаца<br> Третья строка абзаца </p> <p class="p_3"> line-height: 250%<br> Вторая строка абзаца<br> Третья строка абзаца </p> </body> </html>
Пример №1