Discrepância na Textarea e no alinhamento dos elementos vizinhos: uma explicação detalhada

Apesar das aparências, o elemento textarea em seu snippet de código não é colocado mais acima do que seu vizinho, o elemento span. Essa ilusão visual surge de um aspecto fundamental do layout da web conhecido como alinhamento de linha de base.

Alinhamento de linha de base e descendentes

Elementos embutidos, como extensões e áreas de texto, são renderizados na mesma linha de base, que é a linha sobre a qual repousa a maioria dos caracteres. No entanto, certas letras minúsculas, conhecidas como descendentes, estendem-se abaixo da linha de base.

No seu caso, os elementos span e textarea estão acomodando descendentes potenciais em sua renderização. A lacuna que você observa é simplesmente o espaço reservado para esses descendentes.

Ilusão de desalinhamento

O desalinhamento percebido decorre da diferença no tratamento das bordas entre os elementos span e textarea. A borda do span envolve o texto e o espaço descendente, enquanto a borda da textarea não. Isso cria a ilusão de que a área de texto está mais acima.

Soluções possíveis

Para resolver essa discrepância visual, você pode:

• Adicione vertical-align: bottom à regra da área de texto: Isso alinha a borda inferior da área de texto com a borda inferior do intervalo.
• Adicione display: block à regra da área de texto: Isso remove o comportamento embutido e trata a área de texto como um elemento de bloco, eliminando o efeito de alinhamento da linha de base.