css3中设置文本的行高属性是什么
程序员文章站
2022-03-12 14:15:09
...
css中设置文本行高的属性是“line-height”，该属性用于设置文本行的距离，语法为“line-height:value”；属性值为数字时会设置数字与当前的字体尺寸相乘为行高，属性值单位为“%”时会基于当前字体尺寸的百分比设置行高。
本教程操作环境：windows10系统、CSS3&&HTML5版、Dell G3电脑。
css3中设置文本的行高属性是什么
在css中，设置文本的行高属性是line-heigh。
line-height 属性设置行间的距离（行高）。不允许使用负值。
该属性会影响行框的布局。在应用到一个块级元素时，它定义了该元素中基线之间的最小距离而不是最大距离。
line-height 与 font-size 的计算值之差（在 CSS 中成为“行间距”）分为两半，分别加到一个文本行内容的顶部和底部。可以包含这些内容的最小框就是行框。
原始数字值指定了一个缩放因子，后代元素会继承这个缩放因子而不是计算值。
其中属性值如下：
示例如下：
<html>
<head>
<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视频教程）
以上就是css3中设置文本的行高属性是什么的详细内容，更多请关注其它相关文章！
上一篇： linux如何返回根目录命令
下一篇： Css3属性前为什么要加webkit
推荐阅读
-
Sencha toucha2中设置文本框默认提示文字的PlaceHolder属性的颜色
-
CSS3中设置字体的抗锯齿或光滑度的属性
-
Python使用OpenPyXl设置Excel表格中的单元格大小（行高和列宽）
-
CSS3中新增的对文本和字体的设置
-
CSS3中设置3D变形的transform-style属性详解
-
CSS如何设置对象中第一行文本的样式_html/css_WEB-ITnose
-
CSS如何设置对象中第一行文本的样式_html/css_WEB-ITnose
-
CSS3中设置字体的抗锯齿或光滑度的属性
-
Sencha toucha2中设置文本框默认提示文字的PlaceHolder属性的颜色
-
如何将HTML页面中的文本设置首行缩进