css设置行间距的方法

1、使用数值来设置行间距,是拥有标准行高的段落。 默认行高大约是1。

<!DOCTYPEhtml>
<html>
<head>
<metacharset="UTF-8">
<title>使用数值来设置行间距</title>
<styletype="text/css">
p.small{
line-height:0.5
}

p.big{
line-height:2
}
</style>
</head>
<body>
<p>
这是拥有标准行高的段落。默认行高大约是1。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。
</p>

<p>
这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。
</p>

<p>
这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。
</p>
</body>

</html>

2、使用百分比设置行间距,line-height属性指定了一个百分数,则会相对于字体去计算行高。在大多数浏览器中默认行高大约是 110% 到 120%。

<!DOCTYPEhtml>
<html>

<head>
<metacharset="UTF-8">
<title>使用数值来设置行间距</title>
<styletype="text/css">
p.small{
line-height:80%;
}

p.big{
line-height:200%;
}
</style>
</head>

<body>
<p>
这是拥有标准行高的段落。在大多数浏览器中默认行高大约是110%到120%。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。这是拥有标准行高的段落。
</p>

<p>
这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。这个段落拥有更小的行高。
</p>

<p>
这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。这个段落拥有更大的行高。
</p>
</body>

</html>

以上就是css设置行间距的方法,希望对大家有所帮助。更多css学习指路:css教程

原文来自:https://www.py.cn
© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容