The pink span has vertical-align: baseline. That lines up the baseline
of its inline box with the baseline of its parent inline box, in this
case the "strut" of the div. In the diagram below the strut is drawn in
red, the inline box for the pink span in blue. Baselines have also been
drawn in, although you can't see the strut baseline since the pink
span's baseline has been drawn on top of it.
This time the pink span has vertical-align middle. That lines up the
middle of its inline box with the middle of its parent inline box, in
this case the "strut" of the div. The effect of this is to move the red
strut up. In both cases, the second span is baseline-aligned to the
strut (the inline box for the second span is not drawn). The
counterintuitive result then is that the second span moves to
the middle even though vertical-align: middle was set on the
first one.
