In-depth understanding of line-height, font-size, vertical-align, fontsizeheight

In-depth understanding of line-height, font-size, vertical-align, fontsizeheight
Directory [1] Line Height [2] font size [3] vertical alignment front

Line-height, font-size, and vertical-align attributes are mutually dependent. Changing the line spacing and setting vertical alignment require the cooperation of these three attributes. For more information about the terms involved in this article, see basic terms of block-level elements and basic terms of in-line elements.

 

Line-height Definition

Line-height indicates the distance between baselines of the line. When a block-level element is applied, line-height defines the minimum distance between the text baselines in the element. When an element in the row is applied, line-height defines the height of the line-frame of the 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

Function

Line-height significantly affects the display of line elements. 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.

 

Font-size

Font-size the font size is set to the height of the em box in the font. The actual font is usually shorter than the em box.

Value: xx-small | x-small | medium | large | x-large | xx-large | smaller | larger | <length >|< percentage> | inherit

Initial Value: medium

Apply to: All elements

Inheritance: Yes

Percentage: font-size relative to the parent Element

 

Vertical-align

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 does not affect the content alignment of block-level elements.

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