Home > Article > Web Front-end > What is the line height attribute of setting text in css3
What is the line height attribute of setting text in css3
- WBOYOriginal
- 2021-12-16 16:10:215108browse
The attribute for setting text line height in css is "line-height". This attribute is used to set the distance between text lines. The syntax is "line-height:value"; when the attribute value is a number, the number and The current font size is multiplied to the line height. When the attribute value unit is "%", the line height will be set based on the percentage of the current font size.
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
What is the line-height attribute for setting text in css3
In css, the line-height attribute for setting text is line-heigh.
The line-height property sets the distance between lines (line height). Negative values are not allowed.
This property affects the layout of the line box. When applied to a block-level element, it defines the minimum distance between baselines in that element rather than the maximum distance.
The calculated difference between line-height and font-size (known as "line spacing" in CSS) is divided into two halves and added to the top and bottom of a line of text content. The smallest box that can contain this content is a line box.
The original numeric value specifies a scaling factor, and descendant elements will inherit this scaling factor rather than the calculated value.
The attribute values are as follows:
The example is as follows:
<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>Output result:
(Learning video sharing: css video tutorial)
The above is the detailed content of What is the line height attribute of setting text in css3. For more information, please follow other related articles on the PHP Chinese website!