Home >Web Front-end >Front-end Q&A >What does line spacing mean in css?
What does line spacing mean in css?
- WBOYOriginal
- 2022-04-24 15:07:192233browse
In CSS, line spacing is represented by "line-height"; the "line-height" attribute is used to set the distance between lines, that is, the line height. You can use percentage units to set the line spacing, and the attribute value It cannot be a negative value, and the syntax is "element object {line-height: line spacing value;}".
The operating environment of this tutorial: Windows 10 system, CSS3&&HTML5 version, Dell G3 computer.
What does line spacing mean in css?
Line spacing is the distance between lines. CSS sets the distance between lines (line height) through the line-height attribute.
There is no attribute that can directly set the line spacing in CSS, so we need to use line-height to set the line spacing. The greater the value of line-height, the higher the line spacing. .
The value of Line-height is set to a specific value, which can be a relative value or an absolute value. In static pages, absolute values are often used when the text size is fixed, but for users such as forums and blogs Pages with customizable font sizes are usually set to relative values, so that the corresponding line spacing can be changed with the user-defined font size.
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 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 does line spacing mean in css?. For more information, please follow other related articles on the PHP Chinese website!