行高 | 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。

<number>该属性的应用值是这个无单位数字<number>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，使用这种方法设置line-height是首选方法，在继承情况下不会有异常的值。

<length>指定<length>? 用于计算 line box 的高度。查看<length>获取可能的单位。

<percentage>与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。

形式化语法

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

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2018-09-28