line-height CSS 属性用于设置多行元素的空间量,如多行文本的间距。对于块级元素,它指定元素行盒(line boxes)的最小高度。对于非替代的 inline 元素,它用于计算行盒(line box)的高度。

语法

/* 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 属性被指定为以下任何一个:

取值

 
normal
取决于用户端。桌面浏览器(包括Firefox)使用默认值,约为1.2,这取决于元素的 font-family
<数字>
该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小。计算值与指定值相同。大多数情况下,这是设置line-height推荐方法,不会在继承时产生不确定的结果。
<长度>
指定<长度>用于计算 line box 的高度。参考<长度>了解可使用的单位。以 em 为单位的值可能会产生不确定的结果(见下面的例子)。
<百分比>
与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。百分比值可能会带来不确定的结果(见下面第二个例子)。
-moz-block-height
将行高设置为当前块的内容区域高度。

形式化语法

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

示例

基本示例

/* 理论上,以下所有规则拥有相同的行高 */

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 简写属性 font shorthand */

为了简便,可以通过 font 简写来设置 line-height,但这要求在使用该简写属性时同时设置 font-family 属性。

推荐在设置 line-height 时使用无单位数值

这个示例说明了为什么给 line-height 赋值时使用 <数字> 值比使用 <长度> 更好。我们会到用两个 <div> 元素。第一个 div 为绿色边框,使用无单位的 line-height值。第二个 div 带红色边框,使用 em 定义 line-height 的值。

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

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

结果

无障碍方面

主段落内容的 line-height 至少应为 1.5。 这将有助于改善低可视条件下的体验,也对认知阻碍者,如阅读困难者,有帮助。如果文字的大小要随页面的缩放而变化,请使用无单位的值,以确保行高也会等比例缩放。

W3C Understanding WCAG 2.1

规范

规范 状态 说明
CSS Transitions
line-height
Working Draft line-height 定义为 animatable.
CSS Level 2 (Revision 1)
line-height
Recommendation 无改动。
CSS Level 1
line-height
Recommendation 初始定义。

初始值normal
适用元素all elements. It also applies to ::first-letter and ::first-line.
是否是继承属性yes
Percentagesrefer to the font size of the element itself
适用媒体visual
计算值for percentage and length values, the absolute length, otherwise as specified
Animation typeeither number or length
正规顺序the unique non-ambiguous order defined by the formal grammar

浏览器兼容性

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
line-heightChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support 1WebView Android Full support 1Chrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support Yes
-moz-block-height
Non-standard
Chrome No support NoEdge No support NoFirefox Full support 3.6IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 4Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.

参见

文档标签和贡献者

标签: 
最后编辑者: RainSlide,