[CSS Supplement line-height] CSS complements line-height (line height) knowledge points

Row height refers to the distance between the baseline of a line of text, but the space between the text is not only the height of the row, but also the font size.

7.3 Line-height

Row height refers to the distance between the baseline of a line of text, but the spacing between the text is not just the row height, but also the font size.

7.3.1 Grammar

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

Syntax: Line-height:normal | < real numbers > | < length > | < percent > | Inherit
Description: Sets the height of the row in an element.
Value: Normal: Default row height, generally 1 to 1.2; Real value, scale factor; length: Valid length value, negative; Percent: The percentage value is based on the font size of the element.
Initial value: Normal
Inheritance: Inheritance
Applies to: all elements
Media: Visual
Calculated values: The length and percent values are absolute, others are the same as the specified values.

Row height refers to the distance between the baseline of a line of text. The baseline (base line), refers to a line of the horizontal edge of the base lines, the baseline is not the bottom edge of the Chinese character, but the lower edge of the English letter x, but also the text of the top line (top lines), midline (middle) and the bottom line (Bottom), The position used to determine the line of text, as shown in 7-17.

Figure 7-17 Baseline of text

The difference between row height and font size is called line spacing (leading), as shown in 7-18.

Figure 7-18 Row height and line spacing

7.3.2 content area, inline box, and row box

Theoretically, each element in a row has a content area, which is determined by the font size, as shown in 7-19.

Figure 7-19 Content Area

The inline element generates an inline box, and the inline box is just a concept that cannot be displayed, but it does exist. In the absence of other factors, the inline box equals the content area, while the set row height increases or decreases the height of the inline box, that is, the line spacing value (row height-font size) is divided by 2, respectively, to the upper and lower sides of the content area, and 7-20 as shown.

Figure 7-20 Inline box and row height

Because row heights can be applied on any element, several elements within the same row may have different row heights and inline box heights, such as the following code, shown in 7-21.

<p style= "line-height:20px;" > Height 20px. <strong style= "line-height:50px;" > Height 50px. </strong><span style= "line-height:30px;" > Height 30px. </span></p>

Figure 7-21 Inline and row boxes

Here's a new concept-line box. Similar to the inner box, the line box refers to the bank's virtual rectangular box, whose height is equal to the highest value in the row of all elements in the bank. Therefore, when there are multiple lines of content, each row will have its own row box, as shown in 7-22.

Figure 7-22 Row box for multi-line content

Tip: Understanding the concept of line and inline boxes is important for learning the section [7.4 Vertical alignment: Vertical-align Properties] in this chapter.
Note: The height of the row box is only related to the row height of the element within the line, not to the height of the parent element (height).

7.3.3 calculation and inheritance of row heights

The line height, in Em, ex, and percent, whose cardinality is the font size of the element itself. For example, the code is as follows:

<p style= "FONT-SIZE:20PX;LINE-HEIGHT:2EM;" > Height 20px, line height 2em. </p> <p style= "FONT-SIZE:30PX;LINE-HEIGHT:2EM;" > Height 30px, line height 2em. </p>

2 paragraphs have a row height of 2em, but the font size is different, so 7-23 is shown.

Figure 7-23 Calculation of Row heights

The line height can be set to be smaller than the font height, when multiple lines of text will be superimposed together, for example, the following code, which is shown in 7-24.

p {font-size:20px; line-height:10px;}

<p> height 20px, line height 10px. Multiple lines of text will be superimposed together at this time. </p>

Figure 7-24 A line taller than the font height

The row height is inheritable, but the computed value is inherited, for example with the following code:

p {font-size:20px; line-height:2em;}
P span {font-size:30px;}

<p> 20px character height. <span> 30px character height. </span></p>

The <p> element has a row height of 2em and a font size of 20px, so the calculated value is 40px, although the <span> element itself has a font size of 30px, but its inherited row height is still 40px. However, the effects displayed in different browsers vary, as shown in 7-25.

Figure 7-25 Different performance of Row heights

Since the inherited values are computed, it is possible to set a fixed row height that will cause the font to overlap if the text font size in the element is different, such as the following code, shown in 7-26.

p {font-size:20px; line-height:1em;}
P span {font-size:30px;}

<p> 20px, line height 1em, text overlap may occur when text is multiple lines. <span> 30px character height. </span></p>

Figure 7-26 Row height inheritance causes text overlay

To avoid this, it is possible to define a row height for each element individually, but this is cumbersome, so you can define a real value without a unit as the scaling factor to uniformly control the row height, which is inherited directly, rather than inheriting the computed value. For example, modify the row height in the previous example to:

p {line-height:1;}

The XHTML code in the example above shows 7-27.

Figure 7-27 Effect of scaling factor on row height

When the content contains a picture, if the height of the picture is greater than the row, then the row box containing the picture row will be stretched to the height of the picture, 7-28.

Figure 7-28 the line containing the picture

Note: Although the picture has a row box open, it does not affect the row height and therefore does not affect other properties that are calculated based on row height.
tip: When a line contains a picture, the vertical alignment of the picture and text is baseline aligned by default, and the vertical alignment is discussed in this chapter [7.4 Vertical alignment: Vertical-align Properties] section.

7.3.4 Browser differences and Errors

Browsers tend to have their own presentation when displayed, for example, in opera, the line height will be defined by the CSS will be added to the top and bottom of the content area by 2, and IE and Firefox are not completely split, 7-29 is shown.

Figure 7-29 Display of row heights for different browsers

However, the difference between 1 to 2 pixels in the actual display is generally not too much impact, so it can be ignored. The more serious error is that IE 6.0 has an issue with the high failure of rows with replaceable inline elements, such as images or table cells, but this error has been fixed in IE 7.0, but it behaves differently from other browsers. For example, the following code is shown in 7-30.

#lineHeight4 p {line-height:60px;}
#lineHeight4 fieldset{border:0;}

<div id= "lineheight4″> <p> content contains images within [IE 6] browsing line-height will expire. </p> <form id= " Testform "action=" # "> <fieldset> <p><label for=" test1″> Table element </label>< input type= "text" Maxlength= "16″value=" IE6 Insider high failure/></p> </fieldset> </form> </div>

Figure 7-30 The row height containing the replacement element is invalidated within IE

By the reader can be found in Figure 7-30, IE 7.0, the half-line is added to the top and bottom of the picture, and because the default is the baseline alignment, so the text of the baseline down, which is clearly not in line with the rules of CSS.

For the problem of high failure of the line in IE 6.0, it is necessary to use CSS hack method to modify the upper and lower padding of the replacement element for IE 6.0.

tip: for the CSS Hack for IE 6, see this book [16th: Browser and Hack].

7.3.5 Apply: Single-line text centered in vertical direction

In web design, the background pattern is often added to highlight the title, as shown in 7-31.

Figure 7-31 Title containing the background picture

Let's say the XHTML code for this title is as follows:

<div id= "#sample" >

At this point, if you only set the

Figure 7-32 heading text with no row height set

For this phenomenon, it is generally only necessary to set the height equal to the line height can be, the relevant code is as follows:

#sample h2 {height:31px; line-height:31px; ...}

The text in the browser is now centered in the vertical position, as shown in 7-33.

Figure 7-33 Setting the caption text after line height

This method can also be used in other places where the text needs to be centered vertically, such as list items, navigation bars, and so on.

The previous section explains the vertical centering of line height and single-line plain text, and if the line contains pictures and text, the reader can find that the text and picture are not centered along the midline in the vertical direction, but are aligned along the baseline, as shown in 7-34.

Figure 7-34 Text and picture content default vertical alignment for baseline alignment

This is because the default vertical alignment of the element is baseline aligned (vertical-align:baseline)

[CSS Supplement line-height] CSS complements line-height (line height) knowledge points