Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

 

Свойство CSS line-height устанавливает величину пространства между строками, например в тексте. В блочных элементах оно указывает минимальную высоту блоков строк внутри элемента. В незамещаемых внутристрочных элементах —указывает высоту, которая используется для вычисления высоты блоков строк.

/* Keyword value */
line-height: normal;

/* Unitless values: use this number multiplied
by the element's font size */
line-height: 3.5;

/* <length> values */
line-height: 3em;

/* <percentage> values */
line-height: 34%;

/* Global values */
line-height: inherit;
line-height: initial;
line-height: unset;

Начальное значениеnormal
Применяется квсе элементы. Это также применяется к ::first-letter и ::first-line.
Наследуетсяда
Процентыотносятся к размеру шрифта самого элемента
Отображениевизуальный
Обработка значениядля процентов и значений длин, абсолютной длины, если другое не указано
Animation typeчисло или длина
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

 

Синтаксис

 

Свойство line-height задаётся с помощью:

Значения

normal
Зависит от пользовательского браузера. Компьютерные браузеры (включая Firefox) используют значение по умолчанию приблизительно 1.2, в зависимости от элементов font-family.
<число>
Используемое значение это бесконечное умножение <числа> на собственный размер шрифта элементов. Вычисленное значение это и есть  <число>. В большинстве случаев  это предпочтительный способ установки значения line-height и позволяет избежать непредвиденных результатов при наследовании.
<величина>
Указанная <величина> используется при вычислении высоты блока строки. Значение, заданное в  единицах em может привести к непредвидимым результатам (смотри пример ниже).
<процентное соотношение>
Относительно размера шрифта самого элемента.
Relative to the font size of the element itself. The computed value is this <percentage> multiplied by the element's computed font size. Percentage values may produce unexpected results (see the second example below).

Formal syntax

normal | <number> | <length> | <percentage>

Examples

Basic example

/* All rules below have the same resultant line height */

div { line-height: 1.2;   font-size: 10pt; }   /* number */ 
div { line-height: 1.2em; font-size: 10pt; }   /* length */ 
div { line-height: 120%;  font-size: 10pt; }   /* percentage */
div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif; } /* font shorthand */

It is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family property to be specified as well.

Prefer unitless numbers for line-height values

This example shows why it is better to use <number> values instead of <length> values. We will use two <div> elements. The first, with the green border, uses a unitless line-height value. The second, with the red border, uses a line-height value defined in ems.

CSS

.green {
  line-height: 1.1;
  border: solid limegreen;
}

.red {
  line-height: 1.1em;
  border: solid red;
}

h1 {
  font-size: 30px;
}

.box {
  width: 18em;
  display: inline-block;
  vertical-align: top;
  font-size: 15px;
}

HTML

<div class="box green">
 <h1>Avoid unexpected results by using unitless line-height.</h1>
  length and percentage line-heights have poor inheritance behavior ...
</div>

<div class="box red">
 <h1>Avoid unexpected results by using unitless line-height.</h1>
  length and percentage line-heights have poor inheritance behavior ...
</div>

<!-- The first <h1> line-height is calculated from its own font-size   (30px × 1.1) = 33px  --> 
<!-- The second <h1> line-height results from the red div's font-size  (15px × 1.1) = 16.5px,  probably not what you want -->

Result

Specifications

Specification Status Comment
CSS Transitions
Определение 'line-height' в этой спецификации.
Рабочий черновик Defines line-height as animatable.
CSS Level 2 (Revision 1)
Определение 'line-height' в этой спецификации.
Рекомендация No change.
CSS Level 1
Определение 'line-height' в этой спецификации.
Рекомендация Initial definition.

Browser compatibility

Update compatibility data on GitHub
КомпьютерыМобильные
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome для AndroidEdge MobileFirefox для AndroidOpera для AndroidiOS SafariSamsung Internet
Базовая поддержкаChrome Полная поддержка 1Edge Полная поддержка 12Firefox Полная поддержка 1IE Полная поддержка 4Opera Полная поддержка 7Safari Полная поддержка 1WebView Android Полная поддержка 1Chrome Android Полная поддержка ДаEdge Mobile Полная поддержка 12Firefox Android Полная поддержка 4Opera Android Полная поддержка 6Safari iOS Полная поддержка 1Samsung Internet Android Полная поддержка Да
-moz-block-height
Нестандартная
Chrome Нет поддержки НетEdge Нет поддержки НетFirefox Полная поддержка 3.6IE Нет поддержки НетOpera Нет поддержки НетSafari Нет поддержки НетWebView Android Нет поддержки НетChrome Android Нет поддержки НетEdge Mobile Нет поддержки НетFirefox Android Полная поддержка 4Opera Android Нет поддержки НетSafari iOS Нет поддержки НетSamsung Internet Android Нет поддержки Нет

Легенда

Полная поддержка  
Полная поддержка
Нет поддержки  
Нет поддержки
Нестандартная. Ожидается плохая кросс-браузерная поддержка.
Нестандартная. Ожидается плохая кросс-браузерная поддержка.

See also

Метки документа и участники

Внесли вклад в эту страницу: Lyod1
Обновлялась последний раз: Lyod1,