CSS vertical alignment and baseline position
baseline, css, html, vertical-alignment
Solution
`vertical-align` is mostly used for `inline` element for example `img` tag, which is commonly set to `vertical-align: middle;` inorder to align correctly within the text.
Demo (Without the use of `vertical-align`)
Demo 2 (Using `vertical-align`)
Ok, so that was a general idea of how `vertical-align` works with a value of `middle`.
So, first lets see what are the valid values for `vertical-align` property.
Credits : Mozilla Developer Network
Now, lets solve your doubt step by step..
In the first example, everything's fine according to you but the answer is no, you are applying `line-height` to the `span` which varies, but the fact is `line-height` is actually not applied as the way you think...
Line height is actually not getting applied
Make it `inline-block` and it will be applied
You can read this answer for more information, that why using `line-height` on `span` is useless.
Moving on to your second doubt, you are having `line-height` on first `span`, second `span` but not the third `span` so what's happening here? As `span` is `inline` with the text and anyways `line-height` won't play the role there as I previously explained, they are happily aligned vertically with the text, whereas when you use `vertical-align: top;`, it doesn't move the other two boxes above that, instead it aligns to the top of the text.
See how the `vertical-align: top;` aligns at the top of the text
Coming to the last example of yours, in here, first `span` element is aligned to the very `bottom` as expected, well its correct, moving on to second, you said it's slightly in the lower than the third, because it is not aligned at all, `line-height` is what it makes that element `align` vertically `center` and last, moves a bit to the `top`, which is infact aligned to the `top`.
Lets make them `inline-block` and see how they actually behave..
So I hope you got the difference between all the three examples, but its necessary for you to understand the `line-height` property and `inline-block` property as well, also don't forget to refer the answer I shared.
Problem
I am new to CSS and recently reading the specification and having some problems in understanding the vertical-align property. ``` <div style="border: 1px solid black;"> <span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span> <span style="border: 1px solid red; padding-left: 1px;"></span> <span style="border: 1px solid red; padding-left: 1px; line-height: 40px;"></span> </div> <div style="border: 1px solid black;"> <span style="border: 1px solid red; padding-left: 1px; line-height: 30px;"></span> <span style="border: 1px solid red; padding-left: 1px;"></span> <span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span> </div> <div style="border: 1px solid black;"> <span style="border: 1px solid red; padding-left: 1px; line-height: 30px; vertical-align: bottom"></span> <span style="border: 1px solid red; padding-left: 1px;"></span> <span style="border: 1px solid red; padding-left: 1px; line-height: 40px; vertical-align: top"></span> </div> ``` Above code creates 3 div, each of them contains 3 empty inline boxes (spans): - In the 1st div, everything seems fine. All the 3 spans are aligned to the baseline of the line box. - In the 2nd div, after I set the `vertical-align` property to `top` for the 3rd span, the first two spans are moved up. And I get lost from here, I don't understand why they will be moved up, according to what rule. - The 3rd div is even more wired to me. I set the `vertical-align` property to `bottom` for the 1st span, and it causes the 2nd span to move slightly lower than the 3rd span (this will be noticed when zoom in enough). The thing I can find in the specification says below, but what exactly are the `multiple solutions`? Could anyone shed more light on this? `In case they are aligned 'top' or 'bottom', they must be aligned so as to minimize the line box height. If such boxes are tall enough, there are multiple solutions and CSS 2.1 does not define the position of the line box's baseline.` I've also created a fiddle. Please run it in Firefox or Chrome if you are interested.