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
171
172
173
174
175
176
177
178
179
|
---
title: line-height
slug: Web/CSS/line-height
tags:
- CSS
- 参考
translation_of: Web/CSS/line-height
---
<div>{{CSSRef}}</div>
<p><span class="seoSummary"><strong><code>line-height</code></strong> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS">CSS</a> 属性用于设置多行元素的空间量，如多行文本的间距。</span>对于块级元素，它指定元素行盒（line boxes）的最小高度。对于非<a href="/en-US/docs/Web/CSS/Replaced_element">替代</a>的 inline 元素，它用于计算行盒（line box）的高度。</p>
<p>{{EmbedInteractiveExample("pages/css/line-height.html")}}</p>
<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p>
<h2 id="语法">语法</h2>
<pre class="brush:css no-line-numbers">/* 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><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> </dt>
<dt><code>normal</code></dt>
<dd>取决于用户端。桌面浏览器（包括Firefox）使用默认值，约为<code>1.2</code>，这取决于元素的 <code>font-family</code>。</dd>
<dt><code><数字></code></dt>
<dd>该属性的应用值是这个无单位数字{{cssxref("<number>", "<数字>")}}乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置<code>line-height</code>的<strong>推荐方法</strong>，不会在继承时产生不确定的结果。</dd>
<dt><code><长度></code></dt>
<dd>指定{{cssxref("<length>", "<长度>")}}用于计算 line box 的高度。参考{{cssxref("<length>", "<长度>")}}了解可使用的单位。以 <strong>em</strong> 为单位的值可能会产生不确定的结果（见下面的例子）。</dd>
<dt><code><百分比></code></dt>
<dd>与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。<strong>百分比</strong>值可能会带来不确定的结果（见下面第二个例子）。</dd>
<dt><code id="-moz-block-height">-moz-block-height</code> {{non-standard_inline}}</dt>
<dd>将行高设置为当前块的内容区域高度。</dd>
</dl>
<h3 id="形式化语法">形式化语法</h3>
<pre class="syntaxbox">{{csssyntax}}</pre>
<h2 id="示例"><strong>示例</strong></h2>
<h3 id="基本示例">基本示例</h3>
<pre class="brush: css">/* 理论上，以下所有规则拥有相同的行高 */
div { line-height: 1.2; font-size: 10pt; } /* 无单位数值 number/unitless */
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 简写属性 font shorthand */
</pre>
<p>为了简便，可以通过 {{cssxref("font")}} 简写来设置 <code>line-height</code>，但这要求在使用该简写属性时同时设置 <code>font-family</code> 属性。</p>
<h3 id="推荐在设置_line-height_时使用无单位数值">推荐在设置 line-height 时使用无单位数值</h3>
<p>这个示例说明了为什么给 <code>line-height</code> 赋值时使用 {{cssxref("<number>", "<数字>")}} 值比使用 {{cssxref("<length>","<长度>")}} 更好。我们会到用两个 {{HTMLElement("div")}} 元素。第一个 <code>div</code> 为绿色边框，使用无单位的 <code>line-height</code>值。第二个 <code>div</code> 带红色边框，使用 <code>em</code> 定义 <code>line-height</code> 的值。</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="结果">结果</h4>
<p>{{EmbedLiveSample('Prefer_unitless_numbers_for_line-height_values', 600, 200)}}</p>
<h2 id="无障碍方面">无障碍方面</h2>
<p>主段落内容的 <code>line-height</code> 至少应为 <code>1.5</code>。 这将有助于改善低可视条件下的体验，也对认知阻碍者，如阅读困难者，有帮助。如果文字的大小要随页面的缩放而变化，请使用无单位的值，以确保行高也会等比例缩放。</p>
<p><a href="https://www.w3.org/TR/WCAG21/#visual-presentation" rel="noopener">W3C Understanding WCAG 2.1</a></p>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('CSS3 Transitions', '#animatable-css', 'line-height')}}</td>
<td>{{Spec2('CSS3 Transitions')}}</td>
<td>将 <code>line-height</code> 定义为 animatable.</td>
</tr>
<tr>
<td>{{SpecName('CSS2.1', 'visudet.html#propdef-line-height', 'line-height')}}</td>
<td>{{Spec2('CSS2.1')}}</td>
<td>无改动。</td>
</tr>
<tr>
<td>{{SpecName('CSS1', '#line-height', 'line-height')}}</td>
<td>{{Spec2('CSS1')}}</td>
<td>初始定义。</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<div>
<p>{{Compat("css.properties.line-height")}}</p>
</div>
<h2 id="参见">参见</h2>
<ul>
<li>{{Cssxref("font")}}</li>
<li>{{Cssxref("font-size")}}</li>
</ul>
|
