1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
|
---
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 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>
|
