Eu pensei que sabia o caminho de CSS, mas precisava explicar algo para alguém agora e descobri que não podia.

Minha pergunta basicamente se resume a: por que évertical-align:baseline ignorado quando existem outros alinhamentos na mesma linha?

Exemplo: se o segundo período tiververtical-align:bottom, o alinhamento vertical da primeira extensão será ignorado se forbaseline; comporta-se como se tivessebottom também.

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

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

Embora todos os vãos tenham um alinhamento vertical diferente debaselineou, se forem todosbaseline, eles se comportam conforme o esperado.

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>

Se esse é um comportamento normal, por que não é descrito em nenhum lugar? Não encontrei nenhuma fonte que diga que a linha de base e a parte superior / inferior interfiram uma com a outra.