Understanding and applying the line-height attribute of CSS rows)

Transferred from jcdmt blog

 

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: sets the height of the row in the element.

Value:

Normal: the default Row Height is 1 to 1.2;

Real Number: real value, scaling factor;

Length: valid length value, which can be negative;

Percentage: The percentage value is based on the element font size.

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 same as the specified values.

The row height refers to the distance between baselines of text rows. 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 text baseline

 

The difference between the Row Height and the font size is leading, as shown in 7-18.

 

Figure 7-18 rows high

 

7.3.2 In theory, each element in a row has a content area determined by the font size, as shown in 7-19.

Figure 7-19 content area

 

An inline box is generated for a row element. The Inline box is just a concept that cannot be displayed, but 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 rows inside the box and Row Height

 

Because the row height can be applied to any element, several elements in the same row may have different row height and the row content height. For example, the following code shows 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 rows and rows

 

Here is 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 rows of high computing

 

The row height can be set to a smaller value than the font height. In this case, multiple lines of text are superimposed. For example, the following code shows 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 rows higher than the font height

 

The row height can be inherited, but it inherits the calculated value. For example, the following code is provided:
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

 

Because it inherits the calculated value, when the font size of the text in the element is different, if you set a fixed line height, it is likely to cause the font to overlap. For example, the following code, it is displayed in 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 overlay of Text

 

To avoid this situation, you can define the Row Height for each element separately, but this is cumbersome. Therefore, you can define an entity value without a unit as a scaling factor to uniformly control the Row Height, the scaling factor is inherited directly, 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.