Baseline and Page Layout in CSS

The theme of this sharing refers to the fifth chapter of the book "Css World" written by Zhang Xinxu.

The letter x and the baseline#

The appearance of the baseline in CSS is to some extent to solve the font typesetting problem. In CSS, the definition of the baseline is related to the letter x, and the bottom edge line of the letter x is the baseline.

x-height
X-height is a concept in CSS and does not exist as an attribute. X-height usually refers to the height of the lowercase letter x, or the distance between the x-height and the baseline, also known as the x-height.
tapd_56960960_1660719840_41

In this figure, there is a midian line, which is different from the middle line in vertical-align: middle;. According to the specification, the middle line is approximately the distance from the baseline to 1/2 * x-height *, which is approximately the intersection point of the letter x.
The following figure is the position of the middle line that I temporarily understand. The line is observed by setting line-height: 0;. The approximate position of this line can also be observed by setting text-decoration: line-through;, and the approximate positions of these two lines are the same.
tapd_56960960_1660720108_13

From x to vertical-align#

The property vertical-align is commonly used for baseline alignment. However, in some cases, you may encounter the problem that the property does not work. This is because vertical-align aligns inline-level elements. The default baseline of inline-level elements is the baseline, which is derived from the bottom edge line of the letter x. When using Chinese or other text, you may encounter a situation where it does not appear aligned. This is because the bottom edge line of Chinese and some English or other text is lower than the baseline, resulting in a visual effect of sinking the text. The following figure shows this:
tapd_56960960_1660720148_92

If you want to align it more accurately, you can use vertical-align: -3px; to manually adjust the bottom alignment. But when you make adjustments, you should be clear that the adjustment is based on the baseline for up and down adjustments, and this adjustment is precise and well supported by various browsers.

The cornerstone of inline elements: line-height#

First, let's ask a question: what supports the expansion of a box? My initial answer was basically that the box is expanded by the content (font-size). But as I read the reference book and practiced, I gradually doubted and then denied my previous answer. We can roughly see this from the following example.

Why did I feel that the box was expanded by the content font-size?

This requires considering how the default value of line-height is calculated. Excluding the influence of font-family on the font, normally the default value of line-height is normal, which is about 1.2. This value needs to be measured specifically according to the browser (different browsers may have differences).

Another aspect to explore is what does 1.2 represent? How is it calculated based on what? How does it regulate line height in text typesetting?
Through experiments, this value is calculated based on the font-size of the element itself (note: font-size has the inheritance property). In the specification of text typesetting, line-height regulation needs to consider two aspects: one is the case of single-line text, and the other is the case of multi-line text.

Single-line text
- In my personal understanding, in the case of a single line, line-height mainly reflects the support for the height of the content.
Multi-line text
- In the case of multiple lines, line-height reflects not only the support for the height of each line of text, but also the distance between the baseline of each line element and the baseline of the next line element.

Why did I only mention text in this situation and did not discuss the expression of line-height in other inline-level elements?
Here, let's take the img element as an example for analysis. First of all, by default, the img element is an inline-level element, but it also has a characteristic that it is a replaceable element. As for what a replaceable element is, in short, changing the tag attributes will affect the page display. We will not discuss the differences between replaceable elements and non-replaceable elements here. For inline-level replaceable elements, line-height does not affect the display size. I have prepared an example to show this:

From this example, we can see that line-height does not affect the height of the img. Then a question arises: why is the height of the box now 256px? The answer to this question brings up the concept of a ghost white space node. This concept may not have been heard or felt in normal times. Similarly, I have prepared an example to prove the existence of ghost white space nodes. You can take a look: After seeing this example, we can clearly see that the span has no content, but why does it have a container height? This is caused by the existence of ghost white space nodes. Ghost white space nodes exist in HTML5-compliant documents, which are documents that are identified by `````` at the beginning of the page. We can find several characteristics of ghost white space nodes through the above example: 1. They exist on inline-level elements. 2. They behave like inline-level elements and have an empty character.

Why is the default value normal about 1.2?
After testing, in Chrome, the default value of line-height normal is about 1.27 (there may be errors). We can see the display of text under the condition of line-height: 1.
tapd_56960960_1660720213_76

You can also directly go to CodePen to see the difference in text typesetting between the two:

It is clear that under the condition of *line-height: 1;*, the text may overlap vertically (why there is such a situation, please understand it in combination with the middle diagram and the case of multi-line text), which is not conducive to reading and makes the page layout appear crowded.

line-height and vertical-align#

The main relationship between line-height and vertical-align is that when you use vertical-align: 10%;, you should be clear that this percentage is calculated based on line-height, and then align the element's baseline to the baseline of the parent element according to the given percentage.

Application#

The generation and correction of image gaps
The following example and some solutions are used to illustrate this issue.

Why does the bottom edge of the image have a few extra pixels of distance? The generation of this gap is influenced by three factors: ghost white space nodes, line-height, and vertical-align. In the above example, one of the reasons why I used the letter x is to replace the ghost white space node to make it more obvious. The current font size is 16px. In Chrome, the value of line-height: normal is about 1.27. We can calculate that the line height is 20.32px, which is rounded to 20px. Because the distance from the bottom edge line of the letter x to the container border is at least 2px (the reason for at least is related to the font) (ps: half line spacing, this is a concept in page layout, I have not explored it yet), we can roughly compare it by manually moving vertical-align for reference.

Not yet explored/supplementary knowledge points#

Line spacing and half line spacing => If interested, please refer to section 5.2.1 of "Css World"
In-depth understanding of vertical-align => If interested, please refer to sections 5.3.4~5.3.8 of "Css World"