css中line-height属性,CSS line-height 属性

属性定义及使用说明

line-height 设置以百分比计的行高。

注意： 负值是不允许的

默认值：

normal

继承：

yes

版本：

CSS1

JavaScript 语法：

object.style.lineHeight=”2″

属性值

值

描述

normal

默认。设置合理的行间距。

number

设置数字，此数字会与当前的字体尺寸相乘来设置行间距。

length

设置固定的行间距。

%

基于当前字体尺寸的百分比行间距。

inherit

规定应该从父元素继承 line-height 属性的值。

浏览器支持

表格中的数字表示支持该属性的第一个浏览器版本号。

属性

line-height

1.0

4.0

1.0

1.0

7.0

实例

使用百分比设置行高:

p.small {line-height:70%;}

p.big {line-height:200%;}

这是一个标准行高的段落。

这是一个标准行高的段落。

大多数浏览器的默认行高约为110%至120%。

这是一个更小行高的段落。

这是一个更小行高的段落。

这是一个更小行高的段落。

这是一个更小行高的段落。

这是一个更大行高的段落。

这是一个更大行高的段落。

这是一个更大行高的段落。

这是一个更大行高的段落。

效果如下：

更多实例

使用像素值设置行间距

本例演示如何使用像素值来设置段落中的行间距。

p.small

{

line-height: 10px

}

p.big

{

line-height: 30px

}

这是一个标准行高的段落。

在大多数浏览器默认行高约20 px。

这是一个标准行高的段落。

这是一个标准行高的段落。

这是一个更小行高的段落。

这是一个更小行高的段落。

这是一个更小行高的段落。

这是一个更小行高的段落。

这是一个更大行高的段落。

这是一个更大行高的段落。

这是一个更大行高的段落。

这是一个更大行高的段落。

效果如下：

使用数值来设置行间距

本例演示如何使用一个数值来设置段落中的行间距。

p.small

{

line-height: 0.5

}

p.big

{

line-height: 2

}

这是一个标准行高的段落。

浏览器的默认行高为“1”。

这是一个标准行高的段落。

这是一个标准行高的段落。

这是一个更小行高的段落。

这是一个更小行高的段落。

这是一个更小行高的段落。

这是一个更小行高的段落。

这是一个更大行高的段落。

这是一个更大行高的段落。

这是一个更大行高的段落。

这是一个更大行高的段落。

效果如下：

相关文章