css设置行间距的方法

  • Z时代
  • 2024-01-10
  • 分类：综合

美女程序员鼓励师

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

css;toolbar:false"><!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、使用百分比设置行间距，line-height属性指定了一个百分数，则会相对于字体去计算行高。在大多数浏览器中默认行高大约是 110% 到 120%。

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

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

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

以上是 css设置行间距的方法 的全部内容， 来源链接： utcz.com/z/544517.html

回到顶部