Rumah > Artikel > hujung hadapan web > css中什么是行高
css中什么是行高
- 青灯夜游asal
- 2021-04-26 17:56:014536semak imbas
行高是包括内容区与以内容区为基础对称拓展的空白区域；一般情况下，也可以认为是相邻文本行基线间的垂直距离。在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>效果图：
（学习视频分享：css视频教程）
Atas ialah kandungan terperinci css中什么是行高. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：css的伪类有哪些Artikel seterusnya：javascript就是js吗