css网页段落间距设置实例

发布时间:2020-10-01编辑:脚本学堂
本文介绍了使用css代码控制网页段落间距的方法,有需要的朋友参考下。

用css控制网页段落行间距的三个例子:
 

1、使用百分比设置行间距
2、使用像素值设置行间距
3、使用数值来设置行间距。

1、使用百分比设置行间距
使用百分比值来设置段落中的行间距。
 

复制代码 代码示例:
<html>
<head>
<style type="text/css">
p.small {line-height: 90%}
p.big {line-height: 200%}
</style>
</head>
<body>
<p>
这是拥有标准行高的段落。
在大多数浏览器中默认行高大约是 110% 到 120%。
</p>
<p class="small">
这个段落拥有更小的行高。
</p>
<p class="big">
这个段落拥有更大的行高。
</p>
</body>
</html>

2、使用像素值设置行间距
使用像素值来设置段落中的行间距。
 

复制代码 代码示例:
<html>
<head>
<style type="text/css">
p.small{line-height: 10px}
p.big{line-height: 30px}
</style>
</head>
<body>
<p>
这是拥有标准行高的段落。
在大多数浏览器中默认行高大约是 20px。
</p>
<p class="small">
这个段落拥有更小的行高。
</p>
<p class="big">
这个段落拥有更大的行高。
</p>
</body>
</html>

3、使用数值来设置行间距
使用一个数值来设置段落中的行间距。
 

复制代码 代码示例:
<html>
<head>
<style type="text/css">
p.small{line-height: 0.5}
p.big{line-height: 2}
</style>
</head>
<body>
<p>
这是拥有标准行高的段落。
默认行高大约是 1。
</p>
<p class="small">
这个段落拥有更小的行高。
</p>
<p class="big">
这个段落拥有更大的行高。
</p>
</body>
</html>