Line-height and Vertical-align row height and row pair Zis solution turn

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 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 elements is baseline alignment (Vertical-align:baseline).

7.4 vertical-align

7.4.1 Grammar

The list of specific definitions for the Vertical-align property is as follows:

Syntax: Vertical-align:baseline | Sub | Super | Top | Text-top | Middle | Bottom | Text-bottom | < percent > | < length > | Inherit
Description: Set the vertical alignment of element content
Value: Baseline: Baseline alignment; Sub: subscript; super: superscript; top: top align; Text-top: Align with top of text, middle: Middle Align, bottom: bottom align; text-bottom: bottom of text;
Percent and Length: CSS2, can be negative.
Initial value: Baseline
Inheritance: Do not inherit
Applies to: inline element and cell (Table-cell) elements
Media: Visual
Calculated values: The percent and length values are absolute lengths; other same specified values

It is important to note that the vertical alignment property is only valid for inline elements . For example, the following code is available:

<p style= "Vertical-align:super;" > Vertical Alignment <span> superscript </span></p& gt;

The <p> element defaults to block-level elements, so there will be no changes when browsing within the browser. And the following code:

<p> Vertical alignment <span style= "Vertical-align:super;" > Superscript </span></p>

The <span> element defaults to inline elements, so the display is shown in 7-35.

Figure 7-35 Vertical Alignment properties are only valid for inline elements

Inline elements also include pictures, form input elements, and so on, while vertical alignment cannot be inherited.

7.4.2 attribute value Detail

In the [7.3 Row High Line-height] section, the baseline, top line, midline, and bottom line of the text were introduced, as well as the content area, inline box, and Line box, while the vertical alignment of this section is closely related to these concepts.

The vertical alignment of the primary property value is shown in form 7-36.

Figure 7-36 The main property values for vertical alignment

(1). Baseline Alignment (Vertical-align:baseline)

Baseline Alignment (Vertical-align:baseline) aligns the baseline of the element's baseline of the half element, for example with the following code:

P Strong {
Line-height:7em;
Font-size:2em;
Vertical-align:baseline;
}

<p> Baseline Alignment <strong>vertical-align:baseline;</strong></p>

The display is shown in 7-37.

Figure 7-37 Baseline Alignment

An element such as a picture or an input box has no baseline of its own, and the baseline of its bottom half is aligned, as shown in 7-34.

(2). Top Alignment (vertical-align:top)

The top alignment (vertical-align:top) aligns the top of the inline box of an element with the top of the row box, for example with the following code:

p {
Line-height:7em;
}
P Strong {
Vertical-align:top;
Line-height:2em;
}
P img {
Vertical-align:top;
}

<p> Top alignment: <strong>vertical-align:top;</strong></p>

The display is shown in 7-38.

Figure 7-38 Align Top

For the <strong> element, not only the vertical-align is set, but also the line-height, which is explained in the description of the inline box in the section [7.3.2 content area, inline box, and Row box] in this chapter, where row heights can change the height of the inline box. If you do not reset the row height, the <strong> element inherits the parent element <p> row height, so the height of the inline box and the row box are the same, and the top alignment will not see the effect.

(3). text top align (vertical-align:text-top)

The text top alignment (vertical-align:text-top) aligns the top of the text line with the top line of the element's inline box, such as the following code, shown in 7-39.

p {
Line-height:7em;
}
P Strong {
Vertical-align:text-top;
Line-height:2em;
}
P img {
Vertical-align:text-top;
}

<p> text top align:<strong> vertical-align:top;</strong></p>

Figure 7-39 Align Top of text

(4). Bottom Alignment (vertical-align:bottom)

The bottom alignment (Vertical-align:bottom) is opposite to the top alignment (Vertical-align:top), as shown in 7-40.

Figure 7-40 Bottom Alignment

(5). text bottom align (vertical-align:text-bottom)

The text bottom alignment (vertical-align:text-bottom) is aligned to the top of the text (Vertical-align:text-top), as shown in 7-41.

Figure 7-41 Text Bottom Alignment

(6). Center Alignment (vertical-align:middle)

Middle Alignment (Vertical-align:middle) is typically used on a picture to align the centerline of the vertical direction of the picture with the midline of the line of text, such as the XHTML code as shown in 7-42.

P img {vertical-align:middle;}

<p> Center alignment 0.5ex above baseline </p>

Figure 7-42 Alignment in the middle

The midline is defined as: The midline is above the baseline, and the distance from the baseline is half of the lowercase x height (that is, ex), as shown in 7-36. Whereas ex is associated with font size, most browsers think 1ex = 0.5em, so the baseline above One-fourth em is aligned as the midline.

Note: As with the difference in line height display, there is a slight difference between the browsers in the middle alignment.

(7). superscript and subscript

Superscript (vertical-align:super) causes the baseline of the element (the bottom of the replacement element) to rise relative to the parent element's baseline, and the subscript (vertical-align:sub) lowers the baseline of the element, which is not specified in the moving amplitude CSS specification and is determined by the browser. For example, the following code is shown in 7-43.

<p> superscript text <span style= "Vertical-align:super;" >vertical-align:super;</span> subscript text <span style= "VERTICAL-ALIGN:SUB;" >vertical-align:sub;</span></p>

Figure 7-43 Superscript and subscript

The superscript does not change the size of the element text.

(8). length values and percentages

Similar to the superscript, the length and percent values cause the baseline of the element (the bottom of the replacement element) to rise (positive) or lower (a negative value) relative to the parent element's baseline.

The moving dimensions of the index are determined by the browser, and the length value or percentage can be used to precisely control the amplitude of the text moving up and down.

The percentage is related to row height, such as the following code, which is shown in 7-44.

p {line-height:2em;}

<p> line Height 2em, vertical percentage alignment: <span style= "vertical-align:100%;" >100% positive upward </span>, while <span style= "vertical-align:-100%;" >-100% negative numbers down & lt;/span>. </p>

Figure 7-44 Alignment of percentages

Setting vertical alignment affects the height of the row box, such as the following code, which is shown in 7-45.

p {line-height:2em;}

<p> Vertical alignment <span style= "VERTICAL-ALIGN:2EM;" > Positive upward </span& gt, while <span style= "VERTICAL-ALIGN:-2EM;" > Negative down </span>. &lt; P&gt; line height is 2em, while vertical aligned text is set to open the Line box. </p>

Figure 7-45 Effect of vertical alignment on a row box

Note: Setting a percentage or value alignment in IE can cause clutter in the content, as shown in 7-46.

Figure 7-46 Setting a percentage or value alignment in IE

Line-height and Vertical-align line height and line to Zi (graphic) turn