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

上一篇：在CSS中Min()函数用来做什么，代码怎样写下一篇：CSS中scale()方法如何用，能实现什么效果

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

1、使用数值来设置行间距

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>使用数值来设置行间距</title>
 <style type="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、使用像素值设置行间距

<!DOCTYPE html>
<html>
 
 <head>
 <meta charset="UTF-8">
 <title>使用数值来设置行间距</title>
 <style type="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属性指定了一个百分比，它将相对于字体来计算行高。

<!DOCTYPE html>
<html>
 
 <head>
 <meta charset="UTF-8">
 <title>使用数值来设置行间距</title>
 <style type="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中设置行间距如何做，方法和代码是什么都有更深刻的体会了吧。这里是群英网络，小编将为大家推送更多相关知识点的文章，欢迎关注！