欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  web前端

css中什么是行高

程序员文章站 2022-03-21 10:50:05
...

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

css中什么是行高

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

1. 基线、底线、顶线

css中什么是行高

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

2. 行距、行高

css中什么是行高

3. 内容区

css中什么是行高

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

4. 行内框

css中什么是行高

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

5. 行框

css中什么是行高

  • 行框（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并不会撑大外层元素的高度，如下图：css中什么是行高

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>

效果图：

css中什么是行高

（学习视频分享：css视频教程）

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

相关标签： css 行高 line-height属性

上一篇： 系统性讲解php可以做什么？（独家原创）

下一篇： 手把手带你通过5个例子来熟悉CSS变量！

推荐阅读