CSS line-height analysis and cssline-height Analysis

CSS line-height analysis and cssline-height Analysis

I. Definition of line-height

Line-height indicates the vertical distance between baselines of the line.

1. What is a baseline?

Generally, a text line has four lines, from top to bottom, which are the top line, middle line, baseline, and bottom line. In English, the baseline is the line at the bottom of the lower-case x letter.

Note that the baseline position is related to the font, and the baseline position of different fonts is different.

2. Since the line height refers to the vertical distance between baselines, is there any line height for a single line of text?

Of course! The answer is below...

3. The Row Height controls the row spacing.

In multiple texts, the first line of text is displayed based on the text font and font size, and the baseline of the first line is determined. Based on the line-height value, determine the location of the baseline of the second row and display the text of the second row above that position.

Under this mechanism, we can infer that line-height controls the line spacing, which is the additional space between text rows that exceeds the font size. In other words, the line-height and font-size are the line spacing. If the line-height value is smaller than font-size, that is, the line spacing is negative, this will cause the last line of text to overlap with the previous line of text.

When line-height is applied to block-level elements, it defines the minimum distance between baselines. Therefore, when there are multiple <p> elements, even if line-height is smaller than font-size, different rows in a single <p> element overlap, <p> elements do not overlap.

For example:

 1 Half the leading is called the half-leading. 
User agents center glyphs vertically in an inline box, which adds half-leading on the top and bottom. </p>11 <p>For example, if a piece of text is "12pt" high and the line-height value is "14pt", 
2pt of extra space should be added: 1pt above and 1pt below the text .</p>12 <p>this applies to empty boxes as well, as if the empty box contained zero-height text</p>13 </body>

The page effect is:

Obviously, because line-height is smaller than font-size, the <p> elements overlap each other, but the <p> elements are displayed normally.

 

2. Line box and line box

1. content area: the area surrounded by the top line and bottom line. Its height is related to the font and font size (which can be roughly equal to the font-size value). It has no half-cent relationship with the line height.

2. inline boxes ):

Each row element generates a line box. The line box is a concept in a browser rendering model and cannot be displayed. When there are no other factors (such as line-height ), the line box is equal to the content area.

After line-height is set, increase or reduce the half-line spacing (line height-font size)/2) to the upper and lower sides of the content area, and a line box is displayed.

3. line boxes: Once a given row has generated all the rows, the structure of the rows will consider these rows, make the row box highly enough to include the top and bottom of the highest row box.

4. ining box: it consists of a row and a row.

 

See the following code:

 1 
 
To make the page effect more obvious, Set font-size to 32px. When the line-height value is normal, the page effect is as follows:

If we change the value of line-height, for example, set the value of line-height to 0, the page effect is:

If we change the line-height value again, set it to 10px and the page effect is:

Try again, set the line-height value to 60px, and the page effect is:

Why does border have these changes?
Font-size is 32px, and the height of the content area is 32px. If line-height is 0, the half-line spacing is-16px. Add-16px to the upper and lower parts of the content area, respectively, the height of all content areas is offset, so that the height of the box in the row is 0. The height of the box in the row and the height of the box are also 0, so the border of a horizontal line is formed. If the line-height is 10px and the semi-line spacing is-11px, add-11px to the upper and lower parts of the content area respectively, and the height of the box in the line is changed to 10px; the height of the row box and the height of the contained box are also 10px.
As a result, we were surprised to find that line-height in the text line determined the height of the line box, and determined the row box and the height of the contained box in sequence based on this. Therefore, the height of an element in a row is determined by line-height, rather than text in the element.
Next we will solve the problem left over from above. Is there a single line of text?
Before solving this problem, we should clarify two points:
1. Because of its inheritance, the line height is everywhere, even a single line of text is no exception.
2. The Row Height is only a black hand behind the scenes. The height is represented by the content area and row spacing, but its value is exactly equal to the row height.
(The line height determines the height. The height is expressed by the content area and line spacing. The line spacing can be large or small, positive or negative, and the height is equal to the line height .)
Therefore, in a single line of text, the height is expressed by the content area and row spacing, and the height is equal to the row height. Therefore, a single line of text has a Row Height ???
3. line-height Attribute Value
1. normal; different browsers have different default values, which are related to the font. Because of this, the reset is usually used in the body element.
2. number; calculated based on the font-size value of the current element.
3. percentage and em.
Here is an example to illustrate the difference between number, percentage, and em:
Assume that the font-size of the parent element is 20px, the line-height is 1.5, and the font-size of the child element is 14. During inheritance, the child element inherits the zoom factor 1.5, therefore, the Row Height of the child element is 14*1.5 = 21.
Assume that the font-size of the parent element is 20px, line-height is 150% or 1.5em, And the font-size of the child element is 14, the child element inherits 20*1.5 = 30. therefore, the Row Height of the child element is 30.
In simple comparison, we can find that when percentage/em is used, the height of the inherited row is a calculated value, and when number is used, it inherits a scaling factor, enables the child element to calculate its Row height based on its font size. Obviously, number is more flexible when setting line-height.