css行之间的间距怎么调?

css行之间的间距可以使用line-height属性来进行调整。line-height(行高)属性的值越大,那么行间距就越高。

line-height属性用于设置行使用的空间量,即行间的距离(行高);不允许使用负值。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>

效果图:

1.png

说明:

line-height属性会影响行框的布局。在应用到一个块级元素时,它定义了该元素中基线之间的最小距离而不是最大距离。

line-height 与 font-size 的计算值之差(在 CSS 中成为“行间距”)分为两半,分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。

语法:

line-height: normal|number|length|%;

属性值:

  • normal:默认值,设置合理的行间距。

  • number:设置无单位数字,此数字会与当前的font-size相乘来设置行间距。

  • length:设置固定的行间距。

  • %:基于当前字体尺寸的百分比行间距。

更多web开发知识,请查阅 HTML中文网 !!

以上就是css行之间的间距怎么调?的详细内容,更多请关注web前端其它相关文章!

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

评论 抢沙发

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

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

联系我们

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

支付宝扫一扫打赏

微信扫一扫打赏