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

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

浏览器兼容性

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support1121471
-moz-block-height No No3.6 No No No
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support1 Yes12461 Yes
-moz-block-height No No No4 No No No

参见

文档标签和贡献者

最后编辑者: zxsunrise,