line-height

**line-height** CSS 属性设置水平书写模式中的行框高度。在垂直书写模式中，它设置行框的宽度。它通常用于设置文本行之间的距离。在水平书写模式下的块级元素上，它指定元素内行框的首选高度，而在非替换内联元素上，它指定用于计算行框高度的高度。

试一试

语法

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: revert;
line-height: revert-layer;
line-height: unset;

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

一个 <number>
一个 <length>
一个 <percentage>
关键字 normal。

值

normal: 取决于用户代理。桌面浏览器（包括 Firefox）使用大约 **1.2** 的默认值，具体取决于元素的 font-family。
<number>（无单位）: 使用值是此无单位 <number> 乘以元素自己的字体大小。计算值与指定的 <number> 相同。在大多数情况下，**这是设置 line-height 的首选方式**，并避免由于继承而导致的意外结果。
<length>: 指定的 <length> 用于计算行框高度。以 **em** 为单位给出的值可能会产生意外结果（参见下面的示例）。
<percentage>: 相对于元素本身的字体大小。计算值是此 <percentage> 乘以元素的计算字体大小。**百分比**值可能会产生意外结果（参见下面的第二个示例）。

无障碍访问

对于主要段落内容的 line-height，使用最小值 1.5。这将有助于视力低下的人，以及患有认知障碍（如阅读障碍）的人。如果页面被缩放以增加文本大小，使用无单位值可确保行高按比例缩放。

W3C 理解 WCAG 2.1

正式定义

初始值	`normal`
应用于	所有元素。它也适用于 `::first-letter` 和 `::first-line`。
继承	是
百分比	指的是元素本身的字体大小
计算值	对于百分比和长度值，绝对长度，否则按指定值
动画类型	数字或长度

正式语法

line-height = 
  normal                     |
  <number [0,∞]>             |
  <length-percentage [0,∞]>  

<length-percentage> = 
  <length>      |
  <percentage>

示例

基本示例

css

/* All rules below have the same resultant line height */

/* number/unitless */
div {
  line-height: 1.2;
  font-size: 10pt;
}

/* length */
div {
  line-height: 1.2em;
  font-size: 10pt;
}

/* percentage */
div {
  line-height: 120%;
  font-size: 10pt;
}

/* font shorthand */
div {
  font:
    10pt/1.2 Georgia,
    "Bitstream Charter",
    serif;
}

如上所示，使用font简写设置line-height通常更方便，但这需要同时指定font-family属性。

建议使用无单位数字作为行高值

此示例说明了为什么最好使用<number>值而不是<length>值。我们将使用两个<div>元素。第一个div（带绿色边框）使用无单位的line-height值。第二个div（带红色边框）使用以em为单位定义的line-height值。

HTML

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

CSS

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

结果

垂直书写模式下的行间距

line-height属性可用于调整垂直书写模式下垂直线之间的间距。

<div class="haiku">
  古池や蛙飛び込む水の音<br />
  ふるいけやかわずとびこむみずのおと<br />
  富士の風や扇にのせて江戸土産<br />
  ふじのかぜやおうぎにのせてえどみやげ<br />
</div>

<div class="haiku wide">
  古池や蛙飛び込む水の音<br />
  ふるいけやかわずとびこむみずのおと<br />
  富士の風や扇にのせて江戸土産<br />
  ふじのかぜやおうぎにのせてえどみやげ<br />
</div>

css

.haiku {
  border: 1px solid;
  margin-bottom: 1rem;
  padding: 0.5rem;
  background-color: wheat;

  writing-mode: vertical-rl;
}

.wide {
  line-height: 2;
}

结果

规范

规范
CSS 内联布局模块 Level 3 # line-height 属性

浏览器兼容性

BCD 表格仅在浏览器中加载

另请参阅

font，font-size