Comprehensive understanding of line-height and vertical-align

line-height, font-size, and vertical-align are key attributes for setting the layout of elements within the line. These three attributes are interdependent relationships, and changing the distance between rows and setting vertical alignments requires their joint efforts. 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 line height refers to the distance between the baselines of the text line. Line-height actually only affects in-line elements and other in-line content, and does not directly affect block-level elements. You can also set line-height for a block-level element, but this value will only have an impact when applied to inline content of block-level elements. Declaring line-height on a block-level element will set a minimum line box height for the content of the block-level element

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

Initial value: normal

Applied to: All elements

Inheritance: Yes

Percentage: Font-size relative to the element

To understand line-height in depth, you need to understand common terms about line-height.

For non-replacement elements or part of anonymous text in the line, font-size and font-family determine the height of the content area. In Song font, if the font-size of an element in a row is 15px, the height of the content area is 15px; in other fonts, the height of the content area is not equal to the font size.

The content area plus the line spacing is equal to the line in-line box. If the font-size of a non-replacement element in a row is 15px and the line-height is 21px, then the difference is 6px. The user agent divides these 6 pixels into two and applies half to the top and bottom of the content area respectively, which gives the line inside the box

When line-height is less than font-size, the line-in-line box is actually less than the content area

The row box is defined as the distance between the top of the highest row inner box in the row and the bottom of the lowest row inner box, and the top of each row box is next to the bottom of the previous row box.

The inner margin, outer margin and border do not affect the height of the line frame, that is, it does not affect the line height.

The border bounding of in-line elements is controlled by font-size instead of line-height

The margins will not be applied to the top and bottom of non-replacement elements in the row

margin-left, padding-left, border-left are applied to the beginning of the element; margin-right, padding-right, border-right are applied to the end of the element

Replacing elements within a row requires the use of line-height values ​​to correctly position elements 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 irrelevant, the key is the value of line-height

By default, the inline replacement element is located on the baseline. If you add inner margin, outer margin, or border to the replacement element, the content area will be moved up. The baseline of the replacement element is the baseline of the last row box in the normal stream. Unless, the content of the replacement element is empty or the value of the overflow attribute itself is not visible, in this case the baseline is margin bottom edge

vertical-align is used to set 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

Applied to: In-line elements, replacement elements, table cells

Inheritance: None

Percentage: line-height relative to element line-height

[Note] The percentage value of vertical-align in IE7-browser does not support decimal row height, and the display effect is different from that of standard browsers when taking baseline, middle, text-bottom, etc. The commonly used solution is to set display:inline-block in the line elements.