In-depth understanding of line-height and vertical-align, vertical-align

In-depth understanding of line-height and vertical-align, vertical-align
* Directory [1] Line Height [2] vertical alignment [3] Before application

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. For terms involved in this article, refer to basic terms of block-level elements and basic terms of line elements.

 

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: <length> | <percentage> | <number> | 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 | <length >|< percentage> | 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.

Vertical-align: baseline (the baseline of the element is aligned with the baseline of the parent element) vertical-align: sub (lowering the baseline of the element to the appropriate subscript position of the parent element) vertical-align: super (raise the baseline of an element to the appropriate superpositions of the parent element) vertical-align: bottom (align the bottom of the alignment child element with the bottom of the row box) vertical-align: text-bottom (align the bottom of the element with the bottom of the content area of the parent element) vertical-align: top (align the top of the aligned child element with the top of the row box) vertical-align: text-top (align the top of the element with the top of the content area of the parent element) vertical-align: middle (The vertical point in the element and the baseline of the parent element plus the height alignment of the letter X in the parent element) vertical-align :( +-n) px (the element is offset npx up and down relative to the baseline) vertical-align: x % (relative to the line-height value of the element) vertical-align: inherit (inheriting the vertical-align attribute value from the parent element)

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

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 Single Line Text

div{    line-height: 100px;    width: 100px;    text-align: center;    border: 1px solid black;}

<Div> test text </div>

[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.

div{    line-height: 200px;    text-align: center;}img{    vertical-align: middle;}

<div>    </div>

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

// Correct 1 <div>  </div> // correct 2 <div>  <! -- Line or space --> </div> // error <div>  </div>

[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.

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

<div>    </div>

[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.

div{    height: 100px;    width: 200px;    background-color: pink;    text-align: center;}span{    display:inline-block;    vertical-align: middle;    line-height: 20px;    width: 100px;}    i{    display: inline-block;    height: 100%;    vertical-align: middle;}

<Div> <I> </I> <span> I am a particularly long, especially long, multi-line text </span> </div>

[5] align icons with text

<Method 1> use a Negative Length Value

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.

<Method 2> align at the bottom of the text

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