css如何控制行间距?

在网页的布局中几大段文字挤在一起总归是不好看的,这时候我们就需要来设置行间距来让文字看起来不拥挤,也让整个页面看起来美观整洁,那么,行间距该如何设置呢?

首先我们应该知道在css中并没有直接可以设置行间距的属性,所以我们就需要借助行高line-height来控制行间距,行高line-height的值越大,那么行间距就越高。

Line-height的值设置为具体的数值,可以是相对数值,也可以设置为绝对数值,在静态页面中,文字大小固定时常常使用绝对数值,行间距通常设置为相对数值,从而,可以随着用户自定义的字体大小改变相应的行间距。

下面我们就来看看css中利用行高line-height来设置行间距的代码示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
           .span1 {
                line-height: 2em;
            }
        </style>   
    </head>
    <body>
        <span class="span1">
桃之夭夭,灼灼其华。之子于归,宜其室家。<br>
桃之夭夭,有蕡其实。之子于归,宜其家室。<br>
桃之夭夭,其叶蓁蓁。之子于归,宜其家人。
        </span> <br><br>      
        <span >
                桃之夭夭,灼灼其华。之子于归,宜其室家。<br>              
                桃之夭夭,有蕡其实。之子于归,宜其家室。<br>               
                桃之夭夭,其叶蓁蓁。之子于归,宜其家人。              
                        </span> 
    </body>
</html>

效果如下:

1.jpg-600

推荐:css手册

以上就是css如何控制行间距?的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » CSS3 答疑