用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>