Home > Developer > JavaScript
CSS about vertical-align: baseline, line-height, css tutorial
In CSS; line-height Analysis (2), we are exposed to the concept of "hidden text nodes", so we understand a lot of line-height and vertical-align: this article analyzes vertical-align: middle to see more strange phenomena.
First focus:
The inline-block baseline is the baseline of the last line box in the normal stream. Unless there is no line boxes in the line box, or the calculated value of its overflow attribute is not visible, then its baseline is the bottom edge of the margin.
The above paragraph is not a human voice. It doesn't matter if you don't understand it. Below is a human voice:
If an inline-block element is empty or has an overflow attribute, the baseline is the bottom edge of its margin.
If an inline-block element is not empty (for example, it contains text or images), its baseline is determined by the baseline of the last line box in the normal stream.
For example, see the following code:
1 <!DOCTYPE html> 2Page effect:
What is the situation of Shenma?
The first box is empty, so its baseline is its bottom border.
(The baseline should have been the bottom edge of margin. For ease of display, margin is 0 by default, so the bottom border is the bottom edge of margin; if you are interested, you can set the margin Size to see the effect .)
The second box contains text, so its baseline is determined by the text baseline, that is, the bottom edge of the x letter.
Baseline alignment by default, so they become like this.
Let's play another game. What if we change the lines of text?
The row height is 80 Px:
The row height is 0:
In the two images, the position of the text is not changed, and the baseline of the text is not changed, so the position of the empty box on the left is not changed.
(The Row Height is 0. It is reasonable to say that the baseline should be moved up. Why does the baseline remain unchanged here ?)
Why does the box on the right move up and down as the text line changes?
As mentioned above, the dot in the content area will be evenly distributed to the upper and lower layers of the row. When the line-height is 80 PX, the upper and lower layers of the content area will be 40 PX each, therefore, the upper border must be moved up to enclose the text;
When line-height is 0, the text has no height, and the upper and lower parts of the content area are 0, the box does not need to leave space inside the border, so it passes through the midpoint of the content area.
(Note: the midpoint of the content area is different from that of x)
Note:
For line elements, vertical-align and line-height are invisible, but they are [everywhere ]!
That is to say, as long as it is a row element, it will be affected by them.
In the case of various incomprehensible strange phenomena caused by the combination of vertical-align: baseline and line-height, you can directly zoom in or change the Row height to 0, you can either discard the baseline alignment (such as bottom line alignment and top line alignment) or change the two items together.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
