Understanding and application of the line-height attribute of CSS rows

The concept of Line Height seems very simple-the height of text lines. In fact, the basic knowledge of line height is also important for understanding other attributes in the future.
Large volumes of dense text are often boring. Therefore, adjusting the line-height properly can reduce reading difficulties and boredom, and make the page look beautiful. The line height refers to the distance between the baselines of the text line, but the gap distance between the text is not only determined by the line height, but also affected by the font size.

7.3.1 syntax the line-height attribute is defined as follows: Syntax: Line-Height: normal | <real number >|< length >|< percentage >| inherit description: set the height of the row in the element. Value: Normal: the default Row Height, generally 1 to 1.2; real number: real value, scaling factor; Length: valid length value, can be negative; percentage: the percentage value is based on the font size of the element. Initial Value: normal inheritance: inheritance applies to: All element media: Visual Computing value: the length and percentage values are absolute values; other values are the distance between baselines of text lines. The baseline refers to the basic line along the horizontal line of a line. The baseline is not the bottom line of a Chinese character, but the bottom line of the English letter X, there are also top line, middle line, and bottom line of the text to determine the position of the text line, as shown in 7-17.

Figure 7-17 the difference between the baseline line height and the font size of the text is called leading, as shown in 7-18.

In theory, each element in a row has a content area, which is determined by the font size, as shown in figure 7-18.

Figure 7-19 an inline box is generated for the Row Element in the content area. The Inline box is just a concept and cannot be displayed, but it does exist. When there are no other factors, the line content is equal to the content area, while setting the line height can increase or reduce the height of the line content, that is: divide the line spacing value (line height-font size) by 2 and add it to the upper and lower sides of the content area, as shown in 7-20.

Figure 7-20 the rows inside the box and the row height can be applied to any element because the row height can be applied to any element, so several elements in the same row may have different rows and the row inside the box height. For example, the following code is provided, it is shown in 7-21.

<P style = "line-Height: 20px;"> & lt; P & gt; The Row Height Is 20px. <Strong style = "line-Height: 50px;"> & lt; strong & gt; The Row Height Is 50px. </Strong> <span style = "line-Height: 30px;"> & lt; span & gt; The Row Height Is 30px. </Span> </P>

Figure 7-21 the line box and the line box have a new concept-line box ). Similar to the in-row box, a row box refers to a virtual rectangular box of the row. Its height is equal to the maximum value of the Row Height of all elements in the row. Therefore, when there are multiple rows of content, each row will have its own row box, as shown in 7-22.

Figure 7-22 row boxes with multiple rows

Tip: Understanding the concepts of the line box and the line box is very important for learning the content in section [7.4 vertical align: vertical-align attributes] in this chapter. Note: The height of the row box is only related to the Row Height of the element in the row, but not to the height of the parent element.

7.3.3 calculation and inheritance of the Row Height in the unit of EM, ex, and percentage, the base is the font size of the element. For example, the Code is as follows:

<P style = "font-size: 20px; line-Height: 2em;"> the word height is 20px, And the Row Height Is 2em. </P> <P style = "font-size: 30px; line-Height: 2em;"> the word height is 30px, And the Row Height Is 2em. </P>
The Row Height of the two paragraphs is 2em, but the font size is different, so 7-23 is displayed.

Figure 7-23 shows that the height of a row is smaller than that of a font. At this time, multiple lines of text are superimposed, as shown in the following code: 7-24.
P {font-size: 20px; line-Height: 10px;} <p> the word height is 20px, And the Row Height Is 10px. Multiple lines of text are superimposed. </P>
Figure 7-24 is more inherited than a row with a smaller font height, but inherits the calculated value. For example, you can run the following code:
P {font-size: 20px; line-Height: 2em;} p span {font-size: 30px ;}< P> the word height is 20px. <Span> the word height is 30px. </Span> </P> <p> the Row Height of the element is 2em, And the font size is 20px. Therefore, the calculated value is 40px. Although the font size of the <span> element is 30px, however, the inherited Row Height is still 40px. However, the effects are different in different browsers, as shown in 7-25.
Figure 7-25 rows are different in height because they inherit the calculated value. Therefore, when the font size of the text in the element is different, if a fixed Row Height is set, the font may overlap, for example, the following code is displayed: 7-26.
P {font-size: 20px; line-Height: 1em;} p span {font-size: 30px;} <p> the word height is 20px, And the Row Height Is 1em, the text may overlap when it is multi-row. <Span> the word height is 30px. </Span> </P>
Figure 7-26 lines of high inheritance result in text overlay. To avoid this situation, you can define the Row Height for each element separately, but this is very cumbersome, therefore, you can define a real value without a unit as a scaling factor to uniformly control the row height. The scaling factor is directly inherited rather than the calculated value. For example, modify the Row Height in the above example:
P {Line-Height: 1 ;}
The above example shows the XHTML code 7-27.
Figure 7-27 the effect of the scaling factor on the row height when the image content contains the image, if the image height is greater than the row height, the row and frame containing the image row will be stretched to the image height, see 7-28.
Figure 7-28 rows containing images
Note: although the row box is opened, the row height is not affected, and other attributes computed based on the row height are not affected. Tip: When an image is contained in a row, the vertical alignment of the image and text is baseline alignment by default. For vertical alignment, see [7.4 vertical alignment: vertical-align attributes.