css设置行间距的方法

美女程序员鼓励师

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

回到顶部