CSS中设置行间距如何做，方法和代码是什么

来源：恒创科技编辑：恒创科技编辑部

2024-01-15 16:32:59

今天这篇给大家分享的知识是“CSS中设置行间距如何做，方法和代码是什么”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，对此分享发大家做个参考，希望这篇“CSS中设置行间距如何做，方法和代码是什么”文章能帮助大家解决问题。

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、使用像素值设置行间距

<!DOCTYPEhtml>
<html>

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

p.big{
line-height:30px
}
</style>
</head>

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

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

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

</html>

3、百分比设置行间距，line-height属性指定了一个百分比，它将相对于字体来计算行高。

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

本文教程操作环境：windows7系统、css3版，DELL G3电脑。

感谢各位的阅读，以上就是“CSS中设置行间距如何做，方法和代码是什么”的内容了，经过本文的学习后，相信大家对CSS中设置行间距如何做，方法和代码是什么都有更深刻的体会了吧。这里是恒创科技，小编将为大家推送更多相关知识点的文章，欢迎关注！

本文地址：https://www.henghost.com/jishu/17214/