行高 | line-height

线高

line-heightCSS属性设置用于行所需要的空间，如文本。在块级元素上，它指定元素中行框的最小高度.。对于未替换的内联元素，它指定用于计算行框高度的高度。

/* Keyword values */
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
适用元素	all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性	yes
Percentages	refer to the font size of the element itself
适用媒体	visual
计算值	for percentage and length values, the absolute length, otherwise as specified
Animation type	either number or length
正规顺序	the unique non-ambiguous order defined by the formal grammar

语法

line-height属性被指定为以下任何一个：

一个<number>

一个<length>

一个<percentage>

关键字normal。

值

normal取决于用户代理。桌面浏览器（包括火狐浏览器）使用默认值，约为1.2，这取决于元素的 font-family。

形式化语法

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

示例

基本实例

/* 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 */

line-height通过使用font上面所示的简写来设置通常更方便，但是这也要求font-family指定属性。

推荐使用无单位数值给line-height赋值

这个示例说明了为什么使用<number>值给line-height赋值比使用<length>更好。我们将使用两个<div>元素。第一个，有绿色边框的将使用无单位line-height值。第二个，有红色边框的，使用length给line-height赋值。

.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;
}

<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 -->

规范

Specification	Status	Comment
CSS TransitionsThe definition of 'line-height' in that specification.	Working Draft	Defines line-height as animatable.
CSS Level 2 (Revision 1)The definition of 'line-height' in that specification.	Recommendation	No change.
CSS Level 1The definition of 'line-height' in that specification.	Recommendation	Initial definition.

浏览器兼容性

Feature	Chrome	Edge	Firefox (Gecko)	Internet Explorer	Opera	Safari
Basic support	1.01	(Yes)	1.0 (1.7 or earlier)	4.01	7.0	1.01

Feature	Android	Edge	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	1.01	(Yes)	1.0 (1)	6.01	6.0	1.01

另见

font，font-size