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.
下面贴出核心代码
<style type="text/css">
p.small {line-height: 0.5}
p.big{line-height: 2}
</style>
posted on 2011-09-17 17:12 More study needed. 阅读(17172) 评论(0) 编辑 收藏 举报
