100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > html css中文字段落 css中文字行间距怎么设置?

html css中文字段落 css中文字行间距怎么设置?

时间:2019-06-16 17:53:34

相关推荐

html css中文字段落 css中文字行间距怎么设置?

在网页的布局中几大段文字挤在一起总归是不好看的,这时候我们就需要来设置行间距来让文字看起来不拥挤,也让整个页面看起来美观整洁,那么,行间距该如何设置呢?本篇文章就来给大家介绍一下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%。

这是一个更小行高的段落。

这是一个更小行高的段落。

这是一个更小行高的段落。

这是一个更小行高的段落。

这是一个更大行高的段落。

这是一个更大行高的段落。

这是一个更大行高的段落。

这是一个更大行高的段落。

这是一个固定行高的段落。

这是一个固定行高的段落。

这是一个固定行高的段落。

这是一个固定行高的段落。

效果图:

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。