"."/> ".">

Home  >  Article  >  Web Front-end  >  What does html5 line spacing mean?

What does html5 line spacing mean?

WBOY
WBOYOriginal
2022-01-23 17:33:514971browse

In HTML5, line spacing is represented by "line-height"; use this attribute to set the line height of text. This attribute will affect the layout of the line box. When setting block-level elements, it will be defined The minimum distance between baselines in this element, the syntax is "".

What does html5 line spacing mean?

The operating environment of this tutorial: Windows 10 system, HTML5 version, Dell G3 computer.

html5 What does line spacing mean?

The line-height property sets the distance between lines (line height).

Note: Negative values ​​are not allowed.

Explanation

This attribute will affect 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 possible values ​​for this property setting are:

What does html5 line spacing mean?

The example is as follows:

<html>
<head>
</head>
<body>
<p>
这是拥有标准行高的段落。
在大多数浏览器中默认行高大约是 110% 到 120%。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
这是拥有标准行高的段落。
</p>
<p style="line-height: 90%">
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
这个段落拥有更小的行高。
</p>
<p style="line-height: 200%">
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
这个段落拥有更大的行高。
</p>
</body>
</html>

Output result:

What does html5 line spacing mean?

Recommended tutorial: "html video tutorial"

The above is the detailed content of What does html5 line spacing mean?. 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