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

Question

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

Answer 1

A shorter explanation: A starting point is knowing where the baseline of the parent is. Add some text within the

tag or a 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;}

  one two three four