CSS参考手册
动画和转换 | Animations & Transitions
行高 | line-height
line-height
CSS属性设置用于行所需要的空间,如文本。在块级元素上,它指定元素中行框的最小高度.。对于未替换的内联元素,它指定用于计算行框高度的高度。
/* Keyword values */
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;
初始值 |
normal |
---|---|
适用元素 |
all elements. It also applies to ::first-letter and ::first-line. |
是否是继承属性 |
yes |
Percentages |
refer to the font size of the element itself |
适用媒体 |
visual |
计算值 |
for percentage and length values, the absolute length, otherwise as specified |
Animation type |
either number or length |
正规顺序 |
the unique non-ambiguous order defined by the formal grammar |
语法
line-height
属性被指定为以下任何一个:
- 一个
<number>
- 一个
<length>
- 一个
<percentage>
- 关键字
normal
。
值
normal
取决于用户代理。桌面浏览器(包括火狐浏览器)使用默认值,约为1.2,这取决于元素的 font-family。
<number>
该属性的应用值是这个无单位数字<number>
乘以该元素的字体大小。计算值与指定值相同。大多数情况下,使用这种方法设置line-height是首选方法,在继承情况下不会有异常的值。
<length>
指定<length>
用于计算 line box 的高度。查看<length>
获取可能的单位。
<percentage>
与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。
形式化语法
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 */
line-height
通过使用font
上面所示的简写来设置通常更方便,但是这也要求font-family
指定属性。
推荐使用无单位数值给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;
}
<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 -->
规范
Specification |
Status |
Comment |
---|---|---|
CSS TransitionsThe definition of 'line-height' in that specification. |
Working Draft |
Defines line-height as animatable. |
CSS Level 2 (Revision 1)The definition of 'line-height' in that specification. |
Recommendation |
No change. |
CSS Level 1The definition of 'line-height' in that specification. |
Recommendation |
Initial definition. |
浏览器兼容性
Feature |
Chrome |
Edge |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
---|---|---|---|---|---|---|
Basic support |
1.01 |
(Yes) |
1.0 (1.7 or earlier) |
4.01 |
7.0 |
1.01 |
Feature |
Android |
Edge |
Firefox Mobile (Gecko) |
IE Phone |
Opera Mobile |
Safari Mobile |
---|---|---|---|---|---|---|
Basic support |
1.01 |
(Yes) |
1.0 (1) |
6.01 |
6.0 |
1.01 |
另见
-
font
,font-size
动画和转换 | Animations & Transitions相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。