这篇翻译不完整。请帮忙从英语翻译这篇文章

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为单位的值可能会产生不确定的结果(见下面的例子)。
<百分比>
与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。百分比值可能会带来不确定的结果(见下面第二个例子)。

形式化语法

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

为了简便,可以通过font简写来设置line-height,但这要求必须设置font-family属性。

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

这个示例说明了为什么给line-height赋值时使用 <数字>值比使用 <长度>更好。我们会使用2个 <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。 这将有助于低可视条件下的体验,尤其对认知阻碍者,如阅读困难者。如果文字的大小要随页面的缩放而变化,请使用无单位的值以确保行高也会等比例缩放。 

Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0

规范

规范 状态 说明
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 AndroidiOS SafariSamsung Internet
Basic supportChrome 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 6Safari 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.

参见

文档标签和贡献者

最后编辑者: zxsunrise,