HTML/CSS: Vertical aligning span with vertical-align and line-height

Question

Sorry to beat a dead horse, but I cannot for the life of me understand why the below does not work.

• Set line-height: 50px
• Set vertical-align: top
• To my understanding, this should make the line-box 50px tall, and then vertical-align should, according to MDN, be able to move the inline element around inside it.

Specifically:

The following values vertically align the element relative to the entire line:

bottom

Aligns the bottom of the element and its descendants with the bottom of the entire line.

I tried both this:

<span style="line-height: 50px; border: 1px solid red; vertical-align: bottom">Some text</span>

And this:

<div style="line-height: 50px; border: 1px solid yellow">
   <span style="border: 1px solid red; vertical-align: bottom">Some text</span>
</div>

It is the last version above that I would expect to position the span at the bottom. It says the line-box should be 50px, then vertical-align is used on the child span.

PS: Please don't just say "use flexbox" or similar. I would like to understand the inner workings / conceptually why the above did not position the span at the bottom of the line.

Answer 1

Everything you said is right but you simply forget something which is inheritance. The span element is having the same line-height defined on the div that's why bottom has no effect in your case.

Reset the value to initial and it will work.

<div style="line-height: 50px; border: 1px solid yellow">
<span style="border: 1px solid red; vertical-align: bottom;line-height:initial;">Some text</span>
</div>