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

概述

line-height CSS属性设置用于行所需要的空间,例如文本。对于块级元素,它指定元素中线框的最小高度。在未替换的内联元素中,它指定用于计算线框高度的高度。对于替代行内元素,如 button 或其他 input 元素,line-height 没有影响(原文未提到,对于部分替代元素,line-height 依然可以影响元素的样式布局)。

初始值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

语法

/* Keyword values */
line-height: normal;

/* Unitless: 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
取决于用户代理。桌面浏览器(包括火狐浏览器)使用默认值,约为1.2,这取决于元素的 font-family。
<number>
该属性的应用值是这个无单位数字<number>乘以该元素的字体大小。计算值与指定值相同。大多数情况下,使用这种方法设置line-height是首选方法,在继承情况下不会有异常的值。
<length>
指定<length>  用于计算 line box 的高度。查看<length> 获取可能的单位。
<percentage>
与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。
Percentage和em可能会带来意想不到的结果,查看"备注"部分。

形式化语法

How to read CSS syntax.

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 { line-height: 12pt;  font-size: 10pt }   /* length */
div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }
 
 
 
 
 
 
 

备注

  • 使用上面”示例“中声明的font简写方式可以更方便的设置line-height。

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

这个示例说明了为什么使用 <number>值给line-height赋值比使用 <length>更好。

我们将使用两个<div> 元素。第一个,有绿色边框的将使用无单位line-height值。第二个,有红色边框的,使用length给line-height赋值。

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

Result:

规范

Specification Status Comment
CSS Transitions
line-height
Working Draft Definesline-height as animatable.
CSS Level 2 (Revision 1)
line-height
Recommendation No change.
CSS Level 1
line-height
Recommendation Initial definition.

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 1.0 [1] 1.0 (1.7 or earlier) 4.0 [1] 7.0 1.0 [1]
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 1.0 [1] 1.0 (1) 6.0 [1] 6.0 1.0 [1]

Webkit & Trident (IE)

[1] Neither engine implements the correct behavior with replaced inline elements like buttons. In some cases line-height is allowed to have an effect on them. This is incorrect behavior relative to the specification.

参见

文档标签和贡献者

 最后编辑者: wdpm,