html5行间距是什么表示

WBOY
WBOY原创
2022-01-23 17:33:513717浏览

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

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

html5行间距是什么表示

line-height 属性设置行间的距离(行高)。

注释:不允许使用负值。

说明

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

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

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

该属性设置可能的值为:

28.png

示例如下:

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

输出结果:

27.png

推荐教程:《html视频教程

以上就是html5行间距是什么表示的详细内容,更多请关注php中文网其它相关文章!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。