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. 阅读(17174) 评论(0) 编辑 收藏 举报
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布：重大改进与新特性概览！
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 单线程的Redis速度为什么快？
· Pantheons：用 TypeScript 打造主流大模型对话的一站式集成库