在网页的布局中几大段文字挤在一起总归是不好看的, 这时候我们就需要来设置行间距来让文字看起来不拥挤, 也让整个页面看起来美观整洁, 那么, 行间距该如何设置呢? 本篇文章就来给大家介绍一下 CSS 行间距的设置方法.
首先我们应该知道在 CSS 中并没有直接可以设置行间距的属性, 所以我们就需要借助行高 line-height 来设置行间距, 行高 line-height 的值越大, 那么行间距就越高.
Line-height 的值设置为具体的数值, 可以是相对数值, 也可以设置为绝对数值, 在静态页面中, 文字大小固定时常常使用绝对数值, 而对于论坛和博客这些用户可以自定义字体大小的页面, 通常设置为相对数值, 从而, 可以随着用户自定义的字体大小改变相应的行间距.
下面我们就来看看 CSS 中利用行高 line-height 来设置行间距的代码示例:
我们下面来看具体的示例
我们先来创建以下的 html 代码(浏览器默认尺寸为 16px)
HTML 代码
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="utf-8">
- <style>
- p{
- width: 600px;
- border: 1px solid #000;
- }
- </style>
- </head>
- <body>
- <p class="sample1">冬天的百草园比较的无味; 雪一下, 可就两样了. 拍雪人(将自己的全形印在雪上)
和塑雪罗汉需要人们鉴赏, 这是荒园, 人迹罕至, 所以不相宜, 只好来捕鸟. 薄薄的雪, 是不行的;
总须积雪盖了地面一两天, 鸟雀们久已无处觅食的时候才好. 扫开一块雪, 露出地面, 用一支短棒支起一面大的竹筛来,
下面撒些秕谷, 棒上系一条长绳, 人远远地牵着, 看鸟雀下来啄食, 走到竹筛底下的时候, 将绳子一拉, 便罩住了.
- </p>
- <p class="sample2">先生读书入神的时候, 于我们是很相宜的. 有几个便用纸糊的盔甲套在指甲上做戏. 我是画画儿,
用一种叫作 "荆川纸" 的, 蒙在小说的绣像上一个个描下来, 象习字时候的影写一样. 读的书多起来, 画的画也多起来;
书没有读成, 画的成绩却不少了, 最成片断的是《荡寇志》和《西游记》的绣像, 都有一大本.
- </p>
- </body>
- </HTML>
接下来我们在 CSS 中应用 line-height 属性
我们首先把 line-height 属性的值设置 normal
CSS 代码
- p.sample1 {
- line-height:normal;
- }
- p.sample2 {
- line-height:normal;
- }
这个状态为默认情况下的个状态, 所以字符间距没有改变
效果如下
下面我们用以下三个单位分别来设置行间距
用 px 设置
CSS 代码如下
- p.sample1 {
- line-height:20px;
- }
- p.sample2 {
- line-height:50px;
- }
在浏览器上显示效果如下. 用 line-height 设置数值 (这里是默认的 16 px) 会把数值上下均等地分配. 因此, 数值越大, 行的间隔也越大.
用 em 设置
接下来是以单位 em(Em)设置行间距的例子. em 是以 font - size 属性指定的大小为 1 的单位, 没有在父元素中被指定的情况下为 1 em = 16px.
CSS 代码如下
- p.sample1 {
- line-height:2em;
- }
- p.sample2 {
- line-height:4em;
- }
在浏览器上显示效果如下
这里指定的值越大, 行间距越大. 默认为 16px, 其中 2em = 32 px,4em = 64px.
用 % 设置
最后用 % 设置. 以 font-size 属性指定的大小为 100%, 用指定的 % 的数值设置行间距. 如果没有被设置的父元素的话, 100% = 16px.
CSS 代码如下所示
- p.sample1 {
- line-height:150%;
- }
- p.sample2 {
- line-height:200%;
- }
在浏览器上显示如下效果
来源: http://www.css88.com/qa/css3/12703.html