Full understanding of CSS line height line-height usage notes

This article reads: "Row height" refers to the height of a line, in particular, refers to the distance between the baseline between two lines. The css,line-height is used to control the vertical distance between rows and lines. The Line-height property affects the layout of the row box. When applied to a block-level element, it defines the minimum distance, not the maximum distance, between the baselines in the element. All browsers support the Line-height property.

First, Line-height grammar

The list of specific definitions for the Line-height property is as follows:

syntax : line-height:normal | < real numbers > | < length > | < percent > | Inherit

description : The Line-height property sets the distance between lines (row height) and cannot use negative values. This property affects the layout of the row box. When applied to a block-level element, it defines the minimum distance, not the maximum distance, between the baselines in the element. The difference (line spacing) between the calculated values of Line-height and font-size is divided into two halves, which are 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, set a reasonable line spacing.
Number	Sets the number that is multiplied by the current font size to set the line spacing. Equivalent multiples
Length	Sets the fixed line spacing.
%	The percentage line spacing based on the current font size.
Inherit	Specifies that the value of the Line-height property should be inherited from the parent element.

Second, the line-height of the top line, midline, Baseline, the bottom line of the case description

Diagram description

From top to bottom four lines are line, line, Baseline, bottom line, very much like learning English letter four line three, we know that the Vertical-align attribute has top, middle, baseline, bottom, is related to these four lines.

In particular, the baseline is not the lowest line, the bottom is the base line.

Three, Line-height high, line spacing and half-spacing

Row height refers to the vertical distance between the baseline of the context line, which is the vertical distance between the two red lines in the graph.

Line spacing is the vertical distance from the bottom line to the top of the next line, the vertical distance between the first row of pink and the Green Line of the second row.

Half-line spacing is half the line spacing, that is, the area 3 vertical distance/2, the sum of the distance of the area 1,2,3,4 is the row height, and the area 1,2,4 distance is the font size, so the half-line spacing can also be counted as follows: (row height-font size)/2

Picture description

Iv. content area, inline box, line box in Line-height

content area: The area where the bottom and top lines are wrapped, that is, the dark gray background area.

inline box, each inline element generates an inline box, which is a concept in a browser rendering model that cannot be displayed, in the absence of other factors (padding, etc.), the inline box equals the content area, and the height of the line is constant when the row height is set, half-spaced " (Row height-font size)/2 "increase/decrease to the upper and lower sides of the content area (dark blue area) respectively

Line box, the line box refers to the bank's virtual rectangular box, which is a concept in the browser rendering mode and is not actually displayed. The height of the row box is equal to the maximum value of the inner box of all elements in the line (the highest row height box is the base, the other inline boxes are aligned to the datum in their own alignment, and the height of the row box is calculated), and each row has its own row box when there are multiple lines of content.

For example

Picture description

V. the way to define Line-height

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 of the 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 pure numbers (even without units)

p {line-height:1.2;}