在网页的布局中几大段文字挤在一起总归是不好看的,这时候我们就需要来设置行间距来让文字看起来不拥挤,也让整个页面看起来美观整洁,那么,行间距该如何设置呢?本篇文章就来给大家介绍一下css行间距的设置方法。
首先我们应该知道在css中并没有直接可以设置行间距的属性,所以我们就需要借助行高line-height来设置行间距,行高line-height的值越大,那么行间距就越高。
Line-height的值设置为具体的数值,可以是相对数值,也可以设置为绝对数值,在静态页面中,文字大小固定时常常使用绝对数值,而对于论坛和博客这些用户可以自定义字体大小的页面,通常设置为相对数值,从而,可以随着用户自定义的字体大小改变相应的行间距。
下面我们就来看看css中利用行高line-height来设置行间距的代码示例:
.small {
line-height: 70%;
}
.big {
line-height: 200%;
}
.length {
line-height: 50px;
}
这是一个标准行高的段落。
这是一个标准行高的段落。
大多数浏览器的默认行高约为110%至120%。
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个固定行高的段落。
这是一个固定行高的段落。
这是一个固定行高的段落。
这是一个固定行高的段落。
效果图: