---
title: line-height
slug: Web/CSS/line-height
translation_of: Web/CSS/line-height
---
<div>{{CSSRef}}</div>
<p>Свойство <a href="https://developer.mozilla.org/ru/docs/Web/css">CSS</a> <strong><code>line-height</code></strong> устанавливает величину пространства между строками, например в тексте. В блочных элементах оно указывает минимальную высоту блоков строк внутри элемента. В <a href="https://developer.mozilla.org/ru/docs/Web/CSS/%D0%97%D0%B0%D0%BC%D0%B5%D1%89%D0%B0%D0%B5%D0%BC%D1%8B%D0%B9_%D1%8D%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82">незамещаемых</a> внутристрочных элементах —указывает высоту, которая используется для вычисления высоты блоков строк.</p>
<div>{{EmbedInteractiveExample("pages/css/line-height.html")}}</div>
<p dir="rtl" id="Syntax"></p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush: css">/* 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;
</pre>
<p dir="rtl"></p>
<p>Свойство <code>line-height</code> задаётся с помощью:</p>
<ul>
<li><code><a href="#<number>"><числа></a></code></li>
<li><code><a href="#<length>"><величины></a></code></li>
<li><code><a href="#<percentage>"><процентного соотношения></a></code></li>
<li>ключевого слова <code><a href="#normal">normal</a></code>.</li>
</ul>
<h3 id="Значения">Значения</h3>
<dl>
<dt><code><a id="normal" name="normal">normal</a></code></dt>
<dd>Зависит от пользовательского браузера. Компьютерные браузеры (включая Firefox) используют значение по умолчанию приблизительно <strong><code>1.2</code></strong>, в зависимости от элементов <code>font-family</code>.</dd>
<dt><code><a id="<number>" name="<number>"><число></a></code></dt>
<dd>Используемое значение это бесконечное умножение {{cssxref("<числа>")}} на собственный размер шрифта элементов. Вычисленное значение это и есть <code><число></code>. В большинстве случаев <strong> это предпочтительный способ установки значения</strong> <code>line-height</code> и позволяет избежать непредвиденных результатов при наследовании.</dd>
<dt><code><a id="<length>" name="<length>"><величина></a></code></dt>
<dd>Указанная {{cssxref("<величина>")}} используется при вычислении высоты блока строки. Значение, заданное в единицах <strong>em</strong> может привести к непредвидимым результатам (смотри пример ниже).</dd>
<dt><code><a id="<percentage>" name="<percentage>"><процентное соотношение></a></code></dt>
<dd>Относительно размера шрифта самого элемента.</dd>
<dd>Relative to the font size of the element itself. The computed value is this {{cssxref("<percentage>")}} multiplied by the element's computed font size. <strong>Percentage</strong> values may produce unexpected results (see the second example below).</dd>
</dl>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
{{csssyntax}}
<h2 id="Примеры">Примеры</h2>
<h3 id="Basic_example">Basic example</h3>
<pre class="brush: css">/* 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 */</pre>
<p>It is often more convenient to set <code>line-height</code> by using the {{cssxref("font")}} shorthand as shown above, but this requires the <code>font-family</code> property to be specified as well.</p>
<h3 id="Prefer_unitless_numbers_for_line-height_values">Prefer unitless numbers for line-height values</h3>
<p>This example shows why it is better to use {{cssxref("<number>")}} values instead of {{cssxref("<length>")}} values. We will use two {{HTMLElement("div")}} elements. The first, with the green border, uses a unitless <code>line-height</code> value. The second, with the red border, uses a <code>line-height</code> value defined in <code>em</code>s.</p>
<h4 id="CSS">CSS</h4>
<pre class="brush: 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;
}
</pre>
<h4 id="HTML">HTML</h4>
<pre class="brush: 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 -->
</pre>
<h4 id="Result">Result</h4>
<p>{{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}}</p>
<h2 id="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'line-height')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>Defines <code>line-height</code> as animatable.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>No change.</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#line-height', 'line-height')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>Initial definition.</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="Browser_compatibility">Browser compatibility</h2>
<div>
<p>{{Compat("css.properties.line-height")}}</p>
</div>
<h2 id="See_also">See also</h2>
<ul>
<li>{{Cssxref("font")}}, {{Cssxref("font-size")}}</li>
</ul>