html语言字体间距怎么设,css中如何设置字/行间距?

65cf3750bb22633200c8a36b491190b7.png

css中如何设置字/行间距?下面本篇文章给大家介绍一下使用css设置字间距和行间距的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

使用css设置字间距

letter-spacing 属性增加或减少字符间的空白(字符间距)。

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄,指定长度值时,会调整字母之间通常的间隔。因此,normal 就相当于值为 0。

对于这个属性来说:每一个中文文字作为一个“字”,而每一个英文字母也作为一个“字”!所以大家要细心留意一下。

注意:允许使用负值,这会让字母之间挤得更紧。

这是正常的字符间距

这是加宽10px字符间距

这是缩减3px字符间距

c9e96df0c15bd31a1a8431c91167ec1e.png

使用css设置行间距

要想使得每行的文字一定的间距距离可以通过CSS的line-height属性来实现。line-height属性用于设置行使用的空间量,即行间的距离(行高);不允许使用负值。

line-height的值表示的是两行文字之间基线的距离(line-height可以实现文字垂直居中效果,但我一般用flex布局来实现,感觉flex布局比较好用,且适用范围广)。

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

.small {

line-height: 70%;

}

.big {

line-height: 200%;

}

.length {

line-height: 50px;

}

这是一个标准行高的段落。
这是一个标准行高的段落。

大多数浏览器的默认行高约为110%至120%。


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


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


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


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


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


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


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


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


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

c6e185d32e147cd9d3f302f9ca0bc000.png

想要了解更多相关知识,可访问 前端学习网站!!

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值