In-depth understanding of line-height and vertical-align-common attributes of front-end layout,

In-depth understanding of line-height and vertical-align-common attributes of front-end layout,

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 following describes line-height and vertical-align:

Row 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. When a block-level element is applied, line-height defines the minimum distance between the element text baselines, that is, the minimum line height.

[Note] If the Row Height of a child inline element in a block-level element is higher than that of the smallest row, the row box is rendered with the Row Height. If the row height is small, it is rendered at the smallest Row Height. Because the Row Height of each child-level inline element is the height of the row's inner frame, only one row contains all row's inner elements (including anonymous text representing the parent element ), the maximum row height can be the Row Height of the entire row. The following is a detailed explanation.

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

Initial Value: normal (generally, the line-height: normal value is 1.2 times the font-size value)

Apply to: All elements

Inheritance: Yes

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

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

Content Area

Font-size determines the height of the content area for a part of Non-replaceable elements or anonymous text in the row.

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, respectively,

In this case, the line box is displayed.

 

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 Alignment

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

[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 in principle is equivalent to alignment of the bottom edge of the image and that of an anonymous text uppercase letter X ); while anonymous text has a Row Height and inherits the Row Height set by the parent element. The default value is normal (that is, 1.2 times the font-size ), therefore, there is a distance between the bottom side of X and 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. line-height of the parent level: 0

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

3. vertical-align: top/middle/bottom

Application

【1]Horizontally and vertically centered multi-line text

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>

[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 is displayed vertically in the center of a row.