Detailed analysis of the vertical-align attribute. In recent days, I have carefully studied the vertical-align attribute. The result surprised me. This very "senior" CSS standard actually behaves differently in various browsers.
There are a lot of values for vertical-align, including baseline sub supper top text-top bottom text-bottom middle and various length values (%, em, ex, etc.). Let me first show you a value that I think is the most exaggerated: bottom. The code is as follows:
Example Source Code
[www.52css.com] p {
font-size: 18px;
line-height: 36px;
font-family: Tahoma, sans-serif;
}
img {
vertical-align: bottom;
}
Then take a look at the effect of this CSS in various browsers (the picture is deliberately made like that, so that the relative position can be clearly seen):
Well, this result is actually very surprising. Generally, I would think that Firefox would explain it more correctly than IE, but after looking at Opera, I found that it is the same as IE, while Safari/Win is on the side of Firefox. To be honest, I don't know what's going on.
I carefully studied the "CSS Definitive Guide (Second Edition)", and even consulted the W3C, and then made a diagram about vertical-align myself:
According to the W3C definition, when the vertical-align of an inline element is set to:
1. When using baseline, top, and bottom, the baseline (or middle, top, bottom) of the element is aligned with the same position of the surrounding elements, such as the top of the picture and the top of the surrounding text.
2. When text-top and text-bottom are used, the top (or bottom) of the element is aligned with the text-top (or text-bottom) of the surrounding elements.
3. The length (%, em, ex) is moved upward based on the baseline, so positive numbers go up and negative numbers go down.
4. When in middle, the center of the element is aligned with the center of the surrounding elements. The definition of "center" here is: the picture is of course half the height, and the text should be moved up 0.5ex based on the baseline, which is the exact center of the lowercase letter "x". However, many browsers often define the unit of ex as 0.5em, so that it is not necessarily the exact center of x (for example, in the above picture, the height of x should be 10px, and em is 18px, so the two values are different).
However, even following the above guidelines, it boggles my mind that browsers interpret things so differently. I'm too lazy to research why this is the case. Generally speaking, it should be that they have different definitions of the position of each line of the font, so this problem is not only related to vertical-align, but also to the browser's interpretation of the structure of inline text and inline images. It has a lot to do with it.
