Pensé que conocía el CSS, pero necesitaba explicarle algo a alguien ahora y descubrí que no podía.

Mi pregunta básicamente se reduce a: ¿por qué esvertical-align:baseline ignorado cuando hay otras alineaciones en la misma línea?

Ejemplo: si el segundo tramo tienevertical-align:bottom, la alineación vertical del primer tramo se ignora si esbaseline; se comporta como si tuvierabottom también.

span:first-child {vertical-align:baseline}
span:last-child {font-size:3em; vertical-align:bottom;}

<p>
  <span>one</span> <span>two</span>
</p>

Mientras que si todos los tramos tienen una alineación vertical que no seabaselineo si son todosbaseline, entonces se comportan como se esperaba.

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>

Si este es un comportamiento normal, ¿por qué no se describe en ninguna parte? No he encontrado ninguna fuente que diga que la línea base y la parte superior / inferior interfieran entre sí de tal manera.