Comprehensive understanding of line-height and vertical-align

Line-height, font-size, and vertical-align are key attributes for setting the layout of inline elements. These three properties are interdependent. Changing the distance between lines, setting vertical alignment, etc. require their cooperation. The relevant content of font-size has been introduced in detail in CSS fonts. This article will mainly introduce line-height and vertical-align.

line-height

definition

Line-height Line height refers to the distance between the baselines of text lines. Line-height actually only affects inline elements and other inline content, and does not directly affect block-level elements. You can also set line-height for a block-level element, but this value only has an effect when applied to the inline content of the block-level element. Declaring line-height on a block-level element sets a minimum line box height for the content of that block-level element.

Value: <length> | <percentage> | <number> | normal | inherit

Initial value: normal

Applies to: All elements

Inheritance: Yes

Percentage: relative to the element's font-size

To understand line-height in depth, you need to understand the common terminology surrounding line box construction.

Content Area

For an inline non-replaced element or a portion of anonymous text, font-size and font-family determine the height of the content area. In the case of Songti, if the font-size of an inline element is 15px, the height of the content area is 15px; in the case of other fonts, the height of the content area is not equal to the font size

Inline Box

The content area plus the line spacing equals the inline box. If an inline non-replaced element has a font-size of 15px and a line-height of 21px, the difference is 6px. The user agent divides these 6 pixels in half and applies half to the top and bottom of the content area, which gives us the inline box.

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

Line Box

A line box is defined as the distance from the top of the highest inline box to the bottom of the lowest inline box in the line, with the top of each line box touching the bottom of the line box in the previous row.

Box Properties

Padding, margins, and borders do not affect the height of the line box, that is, they do not affect the line height

The border boundaries of inline elements are controlled by font-size instead of line-height

Margins are not applied to the top and bottom of inline non-replaced elements.

margin-left, padding-left, and border-left apply to the beginning of the element; margin-right, padding-right, and border-right apply to the end of the element

Inline replaced elements require a line-height value so that the element is positioned correctly when vertically aligned. Because the percentage value of vertical-align is calculated relative to the line-height of the element. For vertical alignment, the height of the image itself is not important, what matters is the value of line-height

By default, inline replaced elements are positioned on the baseline. If you add bottom padding, margin, or border to a replaced element, the content area will move up. The baseline of a replaced element is the baseline of the last line box in normal flow. Unless the replacement element is empty or its overflow attribute value is not visible, in which case the baseline is the margin bottom edge.

vertical-align

definition

vertical-align is used to set the vertical alignment. All vertically aligned elements will affect the row height.

Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit

Initial value: baseline

Applies to: inline elements, replaced elements, table cells

Inheritance: No

Percentage: relative to the line-height of the element

[Note] The percentage value of vertical-align in IE7-browser does not support fractional line height, and the display effect when using baseline, middle, text-bottom and other values ​​is different from that of standard browsers. The common solution is to set the inline element to display: inline-block

[Note] <sub> and <sup> carry the style vertical-align:sub/super by default

The reason why inline-block elements leave gaps in block-level elements is that the default vertical alignment of images is baseline alignment (baseline alignment in principle aligns the bottom edge of the image with the bottom edge of the anonymous text capital letter X); and anonymous text has a line height, so the bottom edge of X is some distance from the line box, and this distance is the gap left by the image

Therefore, there are several solutions to this problem:

[1]display:block

Because vertical alignment can only be applied to replaced elements and inline elements, changing to a block-level element will invalidate the vertical alignment.

[2] Parent's line-height: 0

This makes the distance between the anonymous text and the line box zero.

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

application

【1】Center a single line of text horizontally and vertically

[Note] Many places say that to vertically center a line of text, you need to set the height and line height to the same value, but there is actually no need to set the height. Just set the line height, and the text in a line will be centered vertically.

【2】The image is approximately vertically centered

XML/HTML CodeCopy content to clipboard

Because the character X is not vertically centered in the em box, and the height positions of the character X in different fonts are inconsistent. So, when the font size is larger, this difference is more obvious

[Note] When writing block-level elements containing inline elements in IE7 browser, you must write them in line breaks instead of writing them in one line.

Based on method 2, set the font-size of the block-level element to 0, and the image can be completely vertically centered.

Due to the limitation of method 3 that sets font-size to 0, text cannot be placed inside block-level elements. Method 4 mainly achieves the vertical centering effect by adding new elements. This method can also be used to center the image horizontally and vertically.

【5】Icon and text alignment

<Method 1> Use negative length

According to practical experience, a 20*20 pixel icon followed by a 14px text can achieve a better alignment effect if vertical-align is set to -5px

<Method 2> Use text bottom alignment

Using baseline will make the icon move upward; using top/bottom will be affected by other inline elements and cause positioning deviation; using middle requires the right font size and has low compatibility; using text-bottom is more appropriate and is not affected by line height and other inline elements

The above is the full content of this article. I hope it will be helpful for everyone’s study.

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