line-height

概述

对于块级元素，CSS属性line-height指定了元素内部line-boxes的最小高度。

对于非替代行内元素，line-height用于计算line box的高度。

对于替代行内元素，如button 或其他input元素，line-height没有影响[1]。

语法

/* Keyword values */
line-height: normal;

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

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

<number>

所用的值是无单位数值<number>乘以元素的 font size。计算出来的值与使用数值指定的一样。大多数情况下，使用这种方法设置line-height是首选方法，在继承情况下不会有异常的值。    

<length>

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

<percentage>

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

Percentage和em可能会带来意想不到的结果，查看"备注"部分。

形式化语法

How to read CSS syntax.

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 { line-height: 12pt;  font-size: 10pt }   /* length */
div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }

备注

• It is often more convenient to set line-height by using the font shortcut as stated in the "Examples" section above.
• 使用上面”示例“中声明的font快捷键可以更方便的设置line-height。

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

This example shows why it is better to prefer <number> values for line-height instead of a <length>.

这个示例说明了为什么使用 <number>值给line-height赋值比使用 <length>更好。

We will use two <div> elements. The first, with the green border, will use a unitless line-height value. The second, with the red border, has a length line-height value.

我们将使用两个<div> 元素。第一个，有绿色边框的将使用无单位line-height值。第二个，有红色边框的，使用lenght给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;
}

The HTML, with our two boxes:

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

Result:

规范

浏览器兼容性

Webkit & Trident (IE)

[1] Neither engine implements the correct behavior with replaced inline elements like buttons. In some cases line-height is allowed to have an effect on them. This is incorrect behavior relative to the specification.

参见

• font, font-size