Comprehensive understanding of the usage instructions of css line-height

Introduction to this article: "Line height" refers to the height of a line of text, specifically the distance between the baselines between two lines of text. In CSS, line-height is used to control the vertical distance between lines. The line-height attribute affects the layout of line boxes. When applied to a block-level element, it defines the minimum distance between baselines in that element rather than the maximum distance. All browsers support the line-height property.

1. Line-height syntax

The specific definition list of line-height attribute is as follows:

Syntax: line-height: normal | | | | inherit

Description: line-height attribute Set the distance between rows (row height), negative values ​​cannot be used. 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 (line spacing) is divided into two halves and added to the top and bottom of a line of text. The smallest box that can contain this content is a line box.

Possible values:

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

Illustration

The four lines from top to bottom are the top line, the middle line, the baseline, and the bottom line. They are very similar to the four lines and three grids used when learning English letters. We know that the vertical-align attributes include top, middle, baseline, and bottom, which are related to these four lines.

Remember especially that the baseline is not the bottom line, the bottom line is the bottom line.

3. Line-heightLine height, line spacing and half-line spacing

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

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

Half line spacing is half of the line spacing, that is, the vertical distance of area 3/2, the sum of the distances of areas 1, 2, 3, and 4 is the line height, and the sum of the distances of areas 1, 2, and 4 is the font size , so half line spacing can also be calculated like this: (line height - font size)/2

Picture Description

4. Content area, inline box, line box in line-height

##Content area: Wrapped by the bottom line and the top line area, which is the dark gray background area in the figure below.

Inline box, each inline element will generate an inline box. The inline box is a concept in the browser rendering model and cannot be displayed. , when there are no other factors (padding, etc.), the inline box is equal to the content area, and when the line height is set, the height of the inline box remains unchanged, and the half line spacing [(line height-font size)/2] increases/decreases to the content respectively. The upper and lower sides of the area (dark blue area)

Line box (line box), The line box refers to a virtual rectangular box of this line, which is a concept in the browser rendering mode , and is not actually displayed. The height of the line box is equal to the largest value of the inline box among all elements in this line (the inline box with the largest line height value is used as the benchmark, and other inline boxes are aligned to the benchmark using their own alignment methods, and the height of the line box is finally calculated). When there are multiple lines content, each line will have its own line box.

For example

Picture description

##5. How to define line-height1. 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 (even without units)

p { line-height:1.2; }

The above is the comprehensive understanding of the usage of css line-height brought by the editor. I hope everyone will support the PHP Chinese website

The above is the detailed content of Comprehensive understanding of the usage instructions of css line-height. For more information, please follow other related articles on the PHP Chinese website!