The usage of High line-height for css rows, and line-height for high rows

Use (to) the High line-height of css rows and the High line-height of rows

This article introduces: "line height" refers to the height of a line of text, specifically the distance between the baselines of the two lines of text. In CSS, line-height is used to control the vertical distance between rows. The line-height attribute affects the layout of the row box. When a block-level element is applied, it defines the minimum distance between the basic line of the element, rather than the maximum distance. All browsers support the line-height attribute.

1. line-height syntax

The line-height attribute is defined as follows:

Syntax: Line-height: normal | <real number >|< length >|< percentage >| inherit

Description: The line-height attribute sets the distance between rows (Row height). Negative values cannot be used. This attribute affects the layout of the row box. When a block-level element is applied, it defines the minimum distance between the basic line of the element, rather than the maximum distance. The difference between the calculated line-height and font-size values (line spacing) is divided into two halves, respectively added to the top and bottom of a text line content. The smallest box that can contain the content is the row box.

Possible values:

Value	Description
Normal	By default, reasonable row spacing is set.
Number	Set a number, which corresponds to the current font sizeMultiplyTo set the line spacing. Equal to multiple
Length	Set a fixed line spacing.
%	The row spacing is based on the percentage of the current font size.
Inherit	Specifies that the value of the line-height attribute should be inherited from the parent element.

2. Example of the top line, middle line, baseline, and bottom line in line-height

Illustration

The top-to-bottom lines are the top line, the middle line, the baseline, and the bottom line. They are similar to the four-line three-lattice when only English letters are learned. We know that the vertical-align attributes include top, middle, baseline, and bottom, it is related to these four lines.

In particular, the baseline is not the bottom line, but the bottom line.

3. line-heightLine Height, line spacing, and semi-line spacing

The line height refers to the vertical distance between baselines of the context line, that is, the vertical distance between the two red lines in the figure.

Line spacing refers to the vertical distance between the bottom line of a row and the next line, that is, the vertical distance between the first line and the second line of the Green Line.

The half-line spacing is the half of the line spacing, that is, the vertical distance of Area 3/2, the distance between area 1, 2, 3, and 3 is the same as the Row Height, while the distance between area 1, 2, 4 is the same as the font size, so the half-line spacing can also be calculated as follows: (line height-font size)/2

Image Description

4. line-heightContent Area, line box, line box

Content Area:The area of the bottom line and top line package, that is, the dark gray background area.

Line box, Each row element will generate a line box. The line box is a concept in a browser rendering model and cannot be displayed. when no other factors affect (padding, etc ), the in-line box is equal to the content area, while the height of the in-line box remains unchanged when the row is set to high, with the half-line spacing [(Row Height-font size) /2] increase/decrease to the upper and lower sides of the content area (dark blue area)

Line box ),A row box is a virtual rectangle box of the line. It is a concept in the browser rendering mode and is not actually displayed. The height of a row box is equal to the maximum value of the row box in all the elements in the row (based on the row box with the highest value as the benchmark, and the other row boxes align with the benchmark in their own alignment mode, the height of the calculated row box). When there are multiple rows of content, each row will have its own row box.

For example

Image Description

5. Define the line-height Method

1. line-height can be defined as normal.

body { line-height:normal; }

2. line-height can be defined as inheritance.

p { line-height:inherit; }

3. line-height can use a percentage value.

p { line-height:120%; }

4. line-height can be defined as a length value (unit: px, em, etc)

p { line-height:20px; }

5. line-height can also be defined as a pure number (or even no unit)

p { line-height:1.2; }