CSS设置文本行间距

<1>.用比例设置行间距

 1 <html>
 2 <head>
 3     <style type="text/css">
 4         p.small {line-height: 90%}
 5         p.big {line-height: 200%}
 6     </style>
 7 </head>
 8 
 9 <body>
10     <p>
11         这是拥有标准行高的段落。
12         在大多数浏览器中默认行高大约是 110% 到 120%。
13         这是拥有标准行高的段落。
14         这是拥有标准行高的段落。
15         这是拥有标准行高的段落。
16         这是拥有标准行高的段落。
17         这是拥有标准行高的段落。
18     </p>
19     <p class="small">
20         这个段落拥有更小的行高。
21         这个段落拥有更小的行高。
22         这个段落拥有更小的行高。
23         这个段落拥有更小的行高。
24         这个段落拥有更小的行高。
25         这个段落拥有更小的行高。
26         这个段落拥有更小的行高。
27     </p>
28     <p class="big">
29         这个段落拥有更大的行高。
30         这个段落拥有更大的行高。
31         这个段落拥有更大的行高。
32         这个段落拥有更大的行高。
33         这个段落拥有更大的行高。
34         这个段落拥有更大的行高。
35         这个段落拥有更大的行高。
36     </p>
37 </body>
38 </html>

只想说明一点，在大多数的浏览器中，标准的行

间距是110%～120%。这个要做到心里有数。

<2>用像素来设置行间距

 1 <html>
 2 <head>
 3     <style type="text/css">
 4         p.small {line-height: 10px}
 5         p.big{line-height: 30px}
 6     </style>
 7 </head>
 8 
 9 <body>
10     <p>
11         这是拥有标准行高的段落。
12         在大多数浏览器中默认行高大约是 110% 到 120%。
13         这是拥有标准行高的段落。
14         这是拥有标准行高的段落。
15         这是拥有标准行高的段落。
16         这是拥有标准行高的段落。
17         这是拥有标准行高的段落。
18     </p>
19     <p class="small">
20         这个段落拥有更小的行高。
21         这个段落拥有更小的行高。
22         这个段落拥有更小的行高。
23         这个段落拥有更小的行高。
24         这个段落拥有更小的行高。
25         这个段落拥有更小的行高。
26         这个段落拥有更小的行高。
27     </p>
28     <p class="big">
29         这个段落拥有更大的行高。
30         这个段落拥有更大的行高。
31         这个段落拥有更大的行高。
32         这个段落拥有更大的行高。
33         这个段落拥有更大的行高。
34         这个段落拥有更大的行高。
35         这个段落拥有更大的行高。
36     </p>
37 </body>
38 </html>

同样的，这里要记住也仅仅是20px而已。　

<3>.用数值来设置行间距

由于代码几乎相同，所以这里就不再贴出代码了。

但是要说明一下。

同样的我们要记住，大多数的浏览器的标准行间距是1.

下面贴出核心代码

　　p.small {line-height: 0.5}

p.big{line-height: 2}

</style>

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。