1. Overview
In order to understand vertical-align, a model called line-box is often constructed. A line-box is shown below, it has several key reference lines, namely top, middle, baseline and bottom. The yellow area is the line-height size.
A line box is an area composed of a line of same-level or multi-level inline or inline-box elements. If the line-height of an element in a line box is greater than the line-height of the container element, the height of the line-box is determined by the line-height Determined by the largest child element, otherwise determined by the line-height of the container element. The line-height and vertical-align of the element with the largest line-height determine the baseline of the line box, and this element is called the key element here.
When the vertical-align property of the key element will affect the vertical-align performance of other inline and inline-block elements in the line-box.
2. Examples
Here are a few simple examples to illustrate. Since the line-height property will be inherited, in order to prevent it from interfering with the description effect, set the line-height property of all elements to 1, namely: *{line-height:1;}.
Example 1: The line-height of the parent element and key element is not set
<div>
<span style='vertical-align:top;'>Span1</span>
<span style='vertical-align:middle;'>Span2</span>
<span style='vertical-align:baseline;'>Span3</span>
<span style='vertical-align:bottom;'>Span4</span>
</div>
Since neither parent nor child elements have line-height set and the child elements have the same font size, the height of the line box is the font height (no key elements or all key elements). It can be seen that the four span elements are laid out in the corresponding positions according to the vertical-align attribute, but because the height of the line box is very low, there is little difference.
Example 2: The key element sets the line-height attribute and vertical-align is set to baseline
<div>
<span style='vertical-align:baseline; line-height:100px;'>Critical</span>
<span style='vertical-align:top;'>Span2</span>
<span style='vertical-align:middle;'>Span3</span>
<span style='vertical-align:baseline;'>Span4</span>
<span style='vertical-align:bottom;'>Span5</span>
</div>
The parent element does not have line-height set. It can be considered that the line-height of the parent element is smaller than the line-height of the key element, so the height of the line box is 100px determined by the key element. At this point, the different performances of the spans with four different vertical-align attributes can be clearly seen. When the vertical-align property of the key element is set to middle, it is similar to this example, with a slight offset.
Example 3: The key element sets the line-height property and the vertical-align is set to top
<div>
<span style='vertical-align:top; line-height:100px;'>Critical</span>
<span style='vertical-align:top;'>Span2</span>
<span style='vertical-align:middle;'>Span3</span>
<span style='vertical-align:baseline;'>Span4</span>
<span style='vertical-align:bottom;'>Span5</span>
</div>
In this example, the key element has line-height set and the parent element has no height so it appears to be vertically centered. Since the vertical-align of the key element is set to top, the base of the entire line box is adjusted to be close to the top. This will affect the vertical-align behavior of other elements in the line-box: elements set to top are at the top, elements set to middle and baseline are near the top and at the top, and elements set to bottom are at the bottom. The case where the vertical-align of the key element is set to bottom is similar to this example.
Example 4: The line-height attribute of the parent element is greater than the key element
<div style='line-height:200px;'>
<span style='vertical-align:top; line-height:100px;'>Critical</span>
<span style='vertical-align:top;'>Span2</span>
<span style='vertical-align:middle;'>Span3</span>
<span style='vertical-align:baseline;'>Span4</span>
<span style='vertical-align:bottom;'>Span5</span>
</div>
Since the parent element sets the line-height attribute and is greater than the line-height of the key element, the height of the line box is the line-height attribute of the parent element, which means that there is no key element, and the positioning reference of the child element is It becomes a virtual line-height that is the same as the parent element, and vertical-align is the inline element of the baseline. It can be seen from this example that although the vertical-align attribute of the critical element is set to top, it does not affect the positioning of the element whose vertical-align is middle and baseline, because it itself becomes an ordinary element.
3. Summary
The height of the Line box is determined by the maximum value of the line-height property of the child element and itself. If the line-height property of the child element with the largest line-height is greater than that of the parent element at the same time, its vertical-align property will affect the vertical-align of other child elements. Performance.