CSS 4.2.4参考手册
目录搜索
提交中...

©
本文档使用 php.cn手册 发布

文字
分享

语法：

line-height：normal | <length> | <percentage> | <number>

默认值：normal

适用于：所有元素

继承性：有

动画性：当值为 <length> | <number> 时

计算值：指定值

取值：

  • normal：允许内容顶开或溢出指定的容器边界。

  • <length>：用长度值指定行高。不允许负值。

  • <percentage>：用百分比指定行高，其百分比取值是基于字体的高度尺寸。不允许负值。

  • <number>：用乘积因子指定行高。不允许负值。

说明：

检索或设置对象的行高。即字体最底端与字体内部顶端之间的距离。

  • 对应的脚本特性为lineHeight。

兼容性：

ValuesIEFirefoxChromeSafariOperaiOS SafariAndroid BrowserAndroid Chrome
Basic Support6.0+2.0+4.0+6.0+15.0+6.0+2.1+18.0+

示例：

实例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

<!DOCTYPE html>

<html lang="zh-cmn-Hans">

<head>

<meta charset="utf-8" />

<title>line-height_CSS参考手册_web前端开发参考手册系列</title>

<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />

<style>

.test div{width:300px;margin:15px 0;border:1px solid #000;}

.test p{margin:0;font-size:30px;}

.fixed div{line-height:20px;}

.percentage div{line-height:130%;}

.gene div{line-height:1.5;}

</style>

</head>

<body>

<ul class="test">

    <li class="fixed">

        <strong>固定数值方式：</strong> - {line-height:20px;}

        <div><p>使用固定数值的方式定义line-height，如设置行高为18px类似这样的固定数值，可能会引发文字重叠的现象。</p></div>

    </li>

    <li class="percentage">

        <strong>百分比方式：</strong> - {line-height:130%;}

        <div>

            如果是这种情况

            <p>使用百分比的方式定义line-height，与使用固定数值方式一样，也可能会引发文字重叠的现象。</p>

        </div>

    </li>

    <li class="gene">

        <strong>因子方式：</strong> - {line-height:1.5;}

        <div>

            如果是这种情况

            <p>使用因子方式定义line-height是非常安全的方式，将可以避免文字重叠的现象。</p>

        </div>

    </li>

</ul>

</body>

</html>

            


运行实例 »

点击 "运行实例" 按钮查看在线实例

上一篇：vertical-align下一篇：text-size-adjust