Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
CSS1CSS2CSS2.1CSS3
IEChromeFireFoxOperaSafari

line-height

Свойство CSS line-height используется для указания точной высоты межстрочного интервала встроенного (inline) элемента, если оно воздействует непосредственно на этот элемент, и он не содержит каких-то других HTML-элементов. Если же line-height указывается для элемента, содержащего несколько встроенных элементов, то оно определяет минимальную высоту межстрочного интервала.

В CSS межстрочным интервалом (интерлиньяжем) называется расстояние между базовыми линиями двух соседних строк. А базовая линия — это воображаемая линия, проходящая по нижнему краю символов. Некоторые буквы (щ, ц, у, д, р, ф) частично выходят за нее.

Межстрочный интервал — line-height.

Межстрочный интервал — line-height

Тип свойства

Назначение: шрифты.

Применяется: ко всем элементам, но оно не будет иметь результата для замещаемых элементов (например, изображений), у которых высота задается свойством height.

Наследуется: да.

Значения

Значением свойства line-height является указание размеров межстрочного расстояния одним из следующих способов:

Процентная запись: относительно размера шрифта элемента.

Значение по умолчанию: normal.

Синтаксис

line-height: normal | число | размеры | проценты | inherit

Пример CSS: использование line-height

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>seodon.ru - CSS свойство line-height</title>
  <style type="text/css">
   div {
    font-size: 20px; /* размер шрифта */
   }
  </style>
 </head>
 <body>
  <div style="line-height: 2">В данном тексте расстояние между строк будет равно 40px.</div>
  <div style="line-height: 110%">А в этом тексте расстояние между строк равняется 22px.</div>
 </body>
</html>

Результат примера

Результат. Использование свойства CSS line-height.

Использование свойства CSS line-height

Версии CSS

Версия:CSS 1CSS 2CSS 2.1CSS 3
Поддержка:ДаДаДаДа

Браузеры

Браузер:Internet ExplorerGoogle ChromeMozilla FirefoxOperaSafari
Версия:6.0 и 7.08.0 и выше2.0 и выше2.0 и выше9.2 и выше3.1 и выше
Поддержка:ЧастичноДаДаДаДаДа

Internet Explorer 6.0 и 7.0 не понимают значение inherit.