这篇文章需要技术复核。如何帮忙。

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

概述

对于块级元素,CSS属性line-height指定了元素内部line-boxes的最小高度。

对于非替代行内元素,line-height用于计算line box的高度。

对于替代行内元素,如button 或其他input元素,line-height没有影响[1](原文未提到,对于部分替代元素,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 typea number, a 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;

 

取值

 
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 }
 
 
 
 
 
 
 

备注

  • It is often more convenient to set line-height by using the font shortcut as stated in the "Examples" section above.
  • 使用上面”示例“中声明的font简写方式可以更方便的设置line-height。

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

This example shows why it is better to prefer <number> values for line-height instead of a <length>.

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

We will use two <div> elements. The first, with the green border, will use a unitless line-height value. The second, with the red border, has a length line-height value.

我们将使用两个<div> 元素。第一个,有绿色边框的将使用无单位line-height值。第二个,有红色边框的,使用lenght给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;
}
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

The HTML, with our two boxes:

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

参见

 

文档标签和贡献者

 此页面的贡献者: MonsterOOF, web677, fa-ge, Sebastianz, noiron, FredWe, NicoleBear
 最后编辑者: MonsterOOF,