css中如何设置字/行间距?

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

使用css设置字间距

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

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

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

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

<p>这是正常的字符间距</p>
<p style="letter-spacing:10px;">这是加宽10px字符间距</p>
<p style="letter-spacing:-10px;">这是缩减3px字符间距</p>

1.png

使用css设置行间距

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

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

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style>
			.small {
				line-height: 70%;
			}
			
			.big {
				line-height: 200%;
			}
			
			.length {
				line-height: 50px;
			}
		</style>
	</head>

	<body>
		<p>
			这是一个标准行高的段落。<br> 这是一个标准行高的段落。
			<br>
			<b>大多数浏览器的默认行高约为110%至120%。</b><br>
		</p>
		<hr>
		<p class="small">
			这是一个更小行高的段落。<br> 这是一个更小行高的段落。
			<br> 这是一个更小行高的段落。
			<br> 这是一个更小行高的段落。
			<br>
		</p>
		<hr>
		<p class="big">
			这是一个更大行高的段落。<br> 这是一个更大行高的段落。
			<br> 这是一个更大行高的段落。
			<br> 这是一个更大行高的段落。
			<br>
		</p>
		<hr>
		<p class="length">
			这是一个固定行高的段落。<br> 这是一个固定行高的段落。
			<br> 这是一个固定行高的段落。
			<br> 这是一个固定行高的段落。
			<br>
		</p>

	</body>

</html>

2.png

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

以上就是css中如何设置字/行间距?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » CSS3 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏