表示行高的css属性是什么

青灯夜游 原创: 2021-07-05 17:45:15 1919浏览

表示行高的css属性是line-height，该属性可以设置行间的距离（行高），语法“line-height:值;”，属性值不可为负数。在应用到一个块级元素时，line-height属性定义了该元素中基线之间的最小距离而不是最大距离。

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

表示行高的css属性是line-height。

line-height 属性可以设置行间的距离（行高）；不允许使用负值。

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

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

line-height属性可以设置的属性值：

值	描述
normal	默认。设置合理的行间距。
number	设置数字，此数字会与当前的字体尺寸相乘来设置行间距。
length	设置固定的行间距。
%	基于当前字体尺寸的百分比行间距。
inherit	规定应该从父元素继承 line-height 属性的值。

示例：

<!DOCTYPE html>
<html>
<head>
<style>
p
{
border:1px solid red;
}
p.small
{
line-height: 0.5
}
p.big
{
line-height: 2
}
</style>
</head>
<body>

<p>
这是一个标准行高的段落。
浏览器的默认行高为“1”。
这是一个标准行高的段落。
这是一个标准行高的段落。
</p>

<p class="small">
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
这是一个更小行高的段落。
</p>

<p class="big">
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
这是一个更大行高的段落。
</p>

</body>
</html>

效果图：