Home > Article > Web Front-end > What is the css property that indicates row height?

What is the css property that indicates row height?

青灯夜游Original: 2021-07-05 17:45:152541browse

表示行高的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>

效果图：

What is the css property that indicates row height?

（学习视频分享：css视频教程）

The above is the detailed content of What is the css property that indicates row height?. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Is css a framework?Next article：Is css a framework?

See more

What is the css property that indicates row height?

Related articles