html5行间距是什么表示-前端问答-PHP中文网

html5行间距是什么表示

WBOY

发布： 2022-01-23 17:33:51

原创

5352人浏览过

在html5中，行间距使用“line-height”来表示；使用该属性可以设置文本的行高，该属性会影响行框的布局，当设置块级元素时，会定义了该元素中基线之间的最小距离，语法为“<元素 style="line-height:行间距值">”。

html5行间距是什么表示

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

html5行间距是什么表示

line-height 属性设置行间的距离（行高）。

注释：不允许使用负值。

说明

立即学习“前端免费学习笔记（深入）”；

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

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

原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。

美间AI

美间AI：让设计更简单

查看详情

该属性设置可能的值为：

示例如下：

<html>
<head>
</head>
<body>
<p>
这是拥有标准行高的段落。
在大多数浏览器中默认行高大约是 110% 到 120%。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
</p>
<p style="line-height: 90%">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>
<p style="line-height: 200%">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>
</body>
</html>

登录后复制

输出结果：