当前位置:Gxlcms > 前端框架 > css中什么是行高

css中什么是行高

时间:2021-07-01 10:21:17 帮助过:77人阅读

行高是包括内容区与以内容区为基础对称拓展的空白区域;一般情况下,也可以认为是相邻文本行基线间的垂直距离。在css中可以使用line-height属性设置行高;该属性设置行间的距离(行高),不允许使用负值。

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

1. 基线、底线、顶线

行高

  • 行高是包括内容区与以内容区为基础对称拓展的空白区域;一般情况下,也可以认为是相邻文本行基线间的垂直距离。
  • 基线并不是汉字的下端沿,而是英文字母"x"的下端沿

2. 行距、行高

行距和行高

3. 内容区

内容区

  • 底线和顶线包裹的区域,实际中不一定看得到,但却是存在。

4. 行内框

行内框

  • 行内框只是一个概念,它无法显示出来,但是它又确实存在
  • 它的高度就是行高
  • 在没有其他因素(padding)影响的时候,行内框等于内容区域

5. 行框

行框

  • 行框(line box)。同行内框类似,行框是指本行的一个虚拟的矩形框
  • 行框高度等于本行内所有元素中行高最大的值

元素对行高的影响

  • 对于行内元素如em、strong、span和等,其padding、margin、border-top、border-bottom 不会增加行高。
    padding会覆盖;margin将重置为0;border-top和border-bottom同样会覆盖。
    padding-left、padding-right、border-left和border-right可用。
  • img元素会影响行高
  • 设置行内元素的padding、border和margin并不会撑大外层元素的高度,如下图:行内元素与行高

6. 设置行高

在CSS中我们可以使用line-height属性来设置行高。line-height属性可用于设置行间的距离(行高),不允许使用负值。

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

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

示例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<style type="text/css">
			p.small {
				line-height: 90%
			}
			
			p.big {
				line-height: 200%
			}
		</style>
	</head>

	<body>

		<p>
			这是拥有标准行高的段落。 在大多数浏览器中默认行高大约是 110% 到 120%。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。 这是拥有标准行高的段落。
		</p>

		<p class="small">
			这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。 这个段落拥有更小的行高。
		</p>

		<p class="big">
			这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。 这个段落拥有更大的行高。
		</p>

	</body>

</html>

效果图:

1.png

(学习视频分享:css视频教程)

以上就是css中什么是行高的详细内容,更多请关注gxlcms其它相关文章!

人气教程排行