css line-height行高实例分析

时间:2016-07-06
css line-height属性用于设置文本的行高,本文章向大家介绍css line-height属性的使用方法和基本使用实例,需要的朋友可以参考一下本文章对css line-height行高的讲解

css line-height属性用于设置文本的行高

 

css line-height介绍

设置以百分比计的行高

line-height语法:

line-height:值;

很多书本上称line-height为行间距,这是不严谨的叫法。行高,顾名思义就是“一行的高度”,而行间距指的是“两行文本之间的距离”,大家稍微想一下就知道这是两个不一样的概念。

line-height属性值:

描述
normal 默认。设置合理的行间距。
number 设置数字,此数字会与当前的字体尺寸相乘来设置行间距。
length 设置固定的行间距。
% 基于当前字体尺寸的百分比行间距。
inherit 规定应该从父元素继承 line-height 属性的值。

说明:一般WEB开发中,我们都是采用像素做单位。

 

css line-height实例

设置行高:

<!DOCTYPE html>
<html>
<head>
<style>
p.small {line-height:70%;}
p.big {line-height:200%;}
</style>
</head>
<body>
<p>
This is a paragraph with a standard line-height.<br>
This is a paragraph with a standard line-height.<br>
The default line height in most browsers is about 110% to 120%.<br>
</p>

<p class="small">
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
This is a paragraph with a smaller line-height.<br>
</p>

<p class="big">
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
This is a paragraph with a bigger line-height.<br>
</p>

</body>
</html>

在线运行

上一页 下一页

原文地址:http://www.manongjc.com/article/1156.html