What's the deal with vertical-align: baseline?

user_1016716 0
Viewed 12384

I thought I knew my way around CSS, but I needed to explain something to someone just now and I found I couldn't.

My question basically boils down to: why is vertical-align:baseline ignored when there are other alignments in the same line?

Example: if the second span has vertical-align:bottom, the first span's vertical alignment is ignored if it is baseline; it behaves as if it has bottom too.

span:first-child {vertical-align:baseline}
span:last-child {font-size:3em; vertical-align:bottom;}
<p>
  <span>one</span> <span>two</span>
</p>

While if all the spans have a vertical-align other than baseline, or, if they are all baseline, then they behave as expected.

span:first-child {vertical-align:top}
span:last-child {font-size:3em; vertical-align:bottom;}
<p>
  <span>one</span> <span>two</span>
</p>

span:first-child {vertical-align:baseline}
span:last-child {font-size:3em; vertical-align:baseline;}
<p>
  <span>one</span> <span>two</span>
</p>

If this is normal behaviour, then why isn't it described anywhere? I haven't found any source that says baseline and top/bottom interfere with each other in such a way.

baseline vertical-alignment css
3 Answers

A shorter explanation: A starting point is knowing where the baseline of the parent is. Add some text within the <p> tag or a <span> with vertical-alignment set to baseline (span "one" below). The baseline of span "one" is the bottom of the characters, e.g. the bottom of the letter 'n'.

Then its easy to see how the other spans change in relation to it. I added a border around span "one" so we can see its top and bottom edges clearly.

span {  }
span:nth-child(1) {vertical-align:baseline; font-size:3em; border: 1px solid gray}
span:nth-child(2) {vertical-align:top; color:red}
span:nth-child(3) {vertical-align:middle; color:green;}
span:nth-child(4) {vertical-align:bottom; color:blue;}
<p>
  <span>one</span> <span>two</span> <span>three</span> <span>four</span>
</p>

user_55064000
Related