Comprehensive Understanding of line-height and vertical-align_HTML/Xhtml _ web page creation

This article mainly introduces line-height and vertical-align in detail to help you fully understand line-height and vertical-align. For more information, see Previous

Line-height, font-size, and vertical-align are key attributes for setting the element layout in the row. These three attributes are mutually dependent, and they need to work together to change the line spacing and set vertical alignment. The relevant content of font-size has been described in detail in the CSS font. This article will mainly introduce line-height and vertical-align.

Line-height

Definition

Line-height indicates the distance between baselines of the line. In fact, line-height of a row only affects the content in the row and other rows, but does not directly affect block-level elements. You can also set line-height for a block-level element, however, this value is only affected when it is applied to the inline content of block-level elements. Declaring line-height on a block-level element sets a minimum row-frame height for the content of the block-level element.

Value: | | | Normal | inherit

Initial Value: normal

Apply to: All elements

Inheritance: Yes

Percentage: font-size relative to the font size of the element

Terms

To have a deep understanding of line-height, you need to understand the frequently used terms about line-frame construction.

Content Area

Font-size and font-family determine the height of the content area for a part of Non-replaceable elements or anonymous text in the row. In the case of, if the font-size of an element in a row is 15px, the height of the content area is 15px. In other cases, the height of the content area is not equal to the font size.

Line box

The line spacing in the content area is equal to that in the line box. If the font-size of a non-replacement element in a row is 15px and the line-height is 21px, the difference is 6px. The User Agent splits the six pixels into two parts, and applies half of them to the top and bottom of the content area. This gives the line box

When line-height is smaller than font-size, the line content is actually smaller than the content area.

Line box

A row box is defined as the distance between the top and bottom of the row's most advanced row box, and the top of the row box is next to the bottom of the last row box.

Box Properties

The padding, outer margin, and border do not affect the Row Height.

The Border Boundary of the element in the row is controlled by font-size instead of line-height.

The outer margin is not applied to the top and bottom of non-replacement elements in the row.

Margin-left, padding-left, and border-left are applied to the beginning of the element, while margin-right, padding-right, and border-right are applied to the end of the element.

Replacement element

To replace an element in a row, you must use the line-height value to locate the element correctly during vertical alignment. Because the vertical-align percentage value is calculated relative to the line-height of the element. For vertical alignment, the height of the image itself is irrelevant. The key is the value of line-height.

By default, the replacement element in the row is located on the base line. If you add the bottom, outer, or border to the replacement element, the content area is moved. The baseline of the element to be replaced is the baseline of the last row box in the normal stream. Unless the content of the replacement element is null or its overflow attribute value is not visible, the baseline is the bottom edge of the margin.

Vertical-align

Definition

Vertical-align is used to set the vertical align. All vertical Alignment Elements will affect the Row Height.

Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | | | Inherit

Initial Value: baseline

Applies to: Row elements, replacement elements, and table cells.

Inheritance: None

Percentage: line-height relative to the Row height of the element

[Note] vertical-align's percentage value in IE7-browser does not support high decimal rows. The baseline, middle, and text-bottom values are different from those displayed in standard browsers, A common solution is to set the display: inline-block for the row element.

Copy the content to the clipboard using CSS Code.

1. Vertical-align: baselinebaseline (the baseline of the element is aligned with that of the parent element)
2. Vertical-align: sub (lowering the baseline of an element to the appropriate subscript position of the parent element)
3. Vertical-align: super (raise the baseline of an element to the appropriate upper position of the parent element)
4. Vertical-align: bottombottom (align the bottom of the aligned child element with the bottom of the row box)
5. Vertical-align: text-bottom (align the bottom of the element with the bottom of the content area of the parent element)
6. Vertical-align: top (alignment the top of the alignment sub-element and the top of the row box)
7. Vertical-align: text-top (align the top of the element with the top of the content area of the parent element)
8. Vertical-align: middle (The vertical point in the element is aligned with the baseline of the parent element plus the letter X in the parent element 1/2)
9. Vertical-align :( +-n) px (npx offset between the element and the baseline)
10. Vertical-align: x % (line-height value relative to the element)
11. Vertical-align: inherit (inherits the vertical-align attribute value from the parent element)

[Note] and the default carry style vertical-align: sub/super

Inline-block bottom gap

Inline-block elements leave gaps in block-level elements because the default vertical alignment of the image is baseline alignment (baseline alignment is at the bottom of the principle image and the bottom of the anonymous text uppercase English letter X ); the anonymous text has a row height, so the bottom side of X is a distance from the Row Frame. This distance is the gap left by the image.

Therefore, there are several solutions to this problem:

[1] display: block

Because the vertical alignment method can only act on the replacement element and the line element, changing it to a block-level element will invalidate the Vertical Alignment Method.

[2] parent line-height: 0

In this way, the distance between the anonymous text and the row box is 0.

[3] vertical-align: top/middle/bottom

Application

[1] horizontal and vertical center of a single line of text

Copy XML/HTML Code to clipboard

1. P {
2. Line-height: 100px;
3. Width: 100px;
4. Text-align: center;
5. Border: 1px solid black;
6. }

8. Test text

[Note] in many cases, the vertical center of a single line of text sets the height and the Row Height to the same value, but it is not necessary to set the height. You only need to set the Row Height. Text in a row is displayed vertically in the center

[2] The image is approximately vertically centered.

Copy XML/HTML Code to clipboard

1. P {
2. Line-height: 200px;
3. Text-align: center;
4. }
5. Img {
6. Vertical-align: middle;
7. }

Because character X is not vertically centered in the em box, and the height and position of character X in each font are inconsistent. Therefore, when the font size is large, this difference is more obvious.

[Note] When writing block-level elements that contain Line Elements, IE7 must write a line feed instead of a line

The Code is as follows:

// Correct 1

// Correct 2

// Error

[3] completely vertical center

Set the font-size of block-level elements to 0 on the basis of method 2. You can set the picture to be completely vertical centered.

The Code is as follows:

P {line-height: 200px; text-align: center; font-size: 0;} img {vertical-align: middle ;}

The Code is as follows:

[4] vertical center of multi-line text

Due to the limitation of setting font-size to 0 in method 3, text cannot be placed in block-level elements. Method 4 the vertical center effect is achieved by adding elements. This method can also be used for horizontal and vertical center of images.

Copy XML/HTML Code to clipboard

1. P {
2. Height: 100px;
3. Width: 200px;
4. Background-color: pink;
5. Text-align: center;
6. }
7. Span {
8. Display: inline-block;
9. Vertical-align: middle;
10. Line-height: 20px;
11. Width: 100px;
12. }
13. I {
14. Display: inline-block;
15. Height: 100%;
16. Vertical-align: middle;
17. }

Copy XML/HTML Code to clipboard

2. I am a particularly long, especially long, multi-line text.

[5] align icons with text

<方法一> Negative Length Value

The Code is as follows:

Img {vertical-align:-5px ;}

Based on practical experience, if the 20*20 pixel icon is followed by 14px text, vertical-align is set to-5px to achieve better alignment.

<方法二> Use text bottom alignment

The Code is as follows:

Img {vertical-align: text-bottom ;}

The use of baseline will make the icon go up; the use of top/bottom will be affected by other line elements, resulting in positioning deviation; use of middle requires a proper font size and low compatibility; use of text-bottom is more appropriate, not Affected by line height and other inline Elements

The above is all the content of this article, hoping to help you learn.

Original article: http://www.cnblogs.com/xiaohuochai/p/5271217.html