How to set the line height of text in css3

This article mainly explains "how to set the line height of the text in css3". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to set the line height of text in css3".

The property that sets the line height of text in css is "line-height", which is used to set the distance of lines of text, the syntax is "line-height:value"; when the attribute value is a number, it is set to multiply the number by the current font size to the line height; when the attribute value unit is "%", the line height is set based on the percentage of the current font size.

The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.

What is the line height property of the text set in css3

In css, set the line height property of the text to line-heigh.

The line-height property sets the distance between rows (row height). Negative values are not allowed.

This property affects the layout of the row box. When applied to a block-level element, it defines the minimum distance rather than the maximum distance between baselines in that element.

The difference between the calculated values of line-height and font-size (called "line spacing" in CSS) is divided into two halves, added to the top and bottom of a line of text, respectively. The smallest box that can contain this content is the row box.

The original numeric value specifies a scaling factor, and descendant elements inherit this scaling factor rather than the calculated value.

Where the attribute values are as follows:

Examples are as follows:

P.small {line-height: 90%} p.big {line-height: 200%}

This is a paragraph with standard line height. The default line height in most browsers is about 110% to 120%. This is a paragraph with standard line height. This is a paragraph with standard line height. This is a paragraph with standard line height. This is a paragraph with standard line height. This is a paragraph with standard line height.

This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height. This paragraph has a smaller line height.

This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height. This paragraph has a larger line height.

Output result:

Thank you for reading, the above is the content of "how to set the line height of the text in css3". After the study of this article, I believe you have a deeper understanding of how to set the line height of the text in css3, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!