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 definitionline-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
the termTo understand line-height in depth, you need to understand common terms about line-height.
Content areaFor 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.
Inline frameThe 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
Line boxesThe 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.
Box PropertiesThe 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
Replace elementsReplacing 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 definitionvertical-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.
CSS Code Copy content to clipboard