line-height

在此页

句法
可访问性关注
形式定义
形式句法
范例
规范
浏览器兼容性
另请参阅
相关话题

line-height CSS property sets the height of a line box. It's commonly used to set the distance between lines of text. On block-level elements, it specifies the minimum height of line boxes within the element. On non- replaced inline elements, it specifies the height that is used to calculate line box height.

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 https://github.com/mdn/interactive-examples and send us a pull request.

句法

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

line-height property is specified as any one of the following:

a <number>
a <length>
a <percentage>
the keyword normal .

值

normal: Depends on the user agent. Desktop browsers (including Firefox) use a default value of roughly 1.2 , depending on the element's font-family .
<number> (unitless): The used value is this unitless <number> multiplied by the element's own font size. The computed value is the same as the specified <number> . In most cases, this is the preferred way to set line-height and avoid unexpected results due to inheritance.
<length>: The specified <length> is used in the calculation of the line box height. Values given in em units may produce unexpected results (see example below).
<percentage>: Relative to the font size of the element itself. The computed value is this <percentage> multiplied by the element's computed font size. Percentage values may produce unexpected results (see the second example below).
-moz-block-height

可访问性关注

Use a minimum value of 1.5 for line-height for main paragraph content. This will help people experiencing low vision conditions, as well as people with cognitive concerns such as Dyslexia. If the page is zoomed to increase the text size, using a unitless value ensures that the line height will scale proportionately.

W3C Understanding WCAG 2.1

形式定义

初始值	`normal`
适用于	所有元素。它还适用于 `::first-letter` and `::first-line` .
继承	yes
百分比	refer to the font size of the element itself
计算值	for percentage and length values, the absolute length, otherwise as specified
动画类型	either number or length

形式句法

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

范例

基本范例

/* All rules below have the same resultant line height */
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 shorthand */

It is often more convenient to set line-height by using the font shorthand as shown above, but this requires the font-family property to be specified as well.

Prefer unitless numbers for line-height values

This example shows why it is better to use <number> values instead of <length> values. We will use two <div> elements. The first, with the green border, uses a unitless line-height value. The second, with the red border, uses a line-height value defined in em s.

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

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

结果

规范

规范	状态	注释
CSS Level 2 (Revision 1) The definition of 'line-height' in that specification.	推荐	无变化。
CSS Level 1 The definition of 'line-height' in that specification.	推荐	初始定义。

浏览器兼容性

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`line-height`	Chrome 完整支持 1	Edge 完整支持 12	Firefox 完整支持 1	IE 完整支持 4	Opera 完整支持 7	Safari 完整支持 1	WebView Android 完整支持 1	Chrome Android 完整支持 18	Firefox Android 完整支持 4	Opera Android 完整支持 10.1	Safari iOS 完整支持 1	Samsung Internet Android 完整支持 1.0
`-moz-block-height` 非标	Chrome 不支持 No	Edge 不支持 No	Firefox 完整支持 3.6	IE 不支持 No	Opera 不支持 No	Safari 不支持 No	WebView Android 不支持 No	Chrome Android 不支持 No	Firefox Android 完整支持 4	Opera Android 不支持 No	Safari iOS 不支持 No	Samsung Internet Android 不支持 No

图例

完整支持
不支持
非标。预期跨浏览器支持较差。

另请参阅

font , font-size

元数据

最后修改： 2020 年 7 月 17 日

CSS
CSS 参考
CSS 字体
指南
1. OpenType font features guide
2. Variable fonts guide
At-Rules
1. @font-face
2. @font-feature-values
特性

在此页

句法

值