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. 閱讀(17202) 評論(0) 收藏 舉報
浙公網安備 33010602011771號