Use the Line box to understand the CSS property vertical-align

1. An overview of the

To understand vertical-align, a model called line-box is often constructed. A line-box is shown in the following figure. It has several key reference lines: top, Middle, baseline, and bottom. The yellow area is the size of line-height.

A Line box is an area of inline or inline-box elements of the same level or multiple levels. If the line-height of an element is greater than the line-height of the container element, The height of the line-box is determined by the maximum line-height child element, otherwise 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. This element is called the key element here.

When the vertical-align property of a key element affects the vertical-align performance of other inline and inline-block elements in the line-box.

Example 2.

Here are a few simple examples to illustrate. Since the line-height attribute is inherited, to prevent it from interfering with the description effect, set the line-height attribute of all elements to 1, that is: *{line-height:1; }.

Example 1: Parent element and key element line-height 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>
Copy the code

 

Since neither parent nor child has a line-height and the child has the same font size, the height of the line box is the font height (no key elements or both key elements). You can see that the four span elements are laid out by the vertical-align attribute, but the difference is not significant because the line box is so low.

Example 2: Set the line-height attribute of the key element and vertical-align 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>
Copy the code

 

The parent element does not have a line-height, so we can assume that the parent element’s line-height is less than the key element’s line-height, so the height of the line box is 100px. At this point, it is obvious that the span of the four vertical-align attributes is different. When the vertical-align attribute of the key element is set to middle, it is similar to this example, with a slight offset.

Example 3: Set the line-height attribute for the key element and vertical-align 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>
Copy the code

In this example, the key element has a line-height 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 baseline of the entire line box is adjusted near the top. This affects the vertical-align performance of the 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 key element vertical-align is set to bottom is similar to this example.

Example 4: The parent element’s line-height attribute 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>
Copy the code

 

Since the parent element sets the line-height attribute and is greater than the key element’s line-height, the height of the line box is the parent element’s line-height attribute, which means there is actually no key element. The child element’s positioning baseline is a virtual line-height of the parent element, and vertical-align is the baseline inline element. From this example, we can see that although the vertical-align attribute of the critical element is set to top, the vertical-align of the middle and baseline elements is not affected because it becomes a common element in itself.

3. Summary

The height of a Line box is determined by the maximum value of the child element and its own line-height attribute. The vertical-align attribute of the child element with the highest line-height is greater than that of the parent element and affects the vertical-align performance of the other child elements.