Textarea 和相鄰元素對齊方式的差異：詳細說明

儘管出現了這種情況，但代碼片段中的textarea 元素並未放置在更高的位置比它的鄰居，跨度元素。這種視覺錯覺源自於網頁版面的一個基本面，稱為基線對齊。

基線對齊和下降

渲染內聯元素，例如跨度和文本區域在同一基線上，這是大多數角色所在的線。但是，某些小寫字母（稱為下行字母）會延伸到基線以下。

在您的情況下，span 和 textarea 元素在渲染時都會容納潛在的下行字母。您觀察到的間隙只是為這些下降部分保留的空間。

未對齊錯覺

感知到的未對齊源自於 span 與 textarea 元素之間的邊框處理差異。 Span 的邊框包裹文字和下行空間，而 Textarea 的邊框則不然。這會產生文字區域位於較高位置的錯覺。

可能的解決方案

要解決此視覺差異，您可以：

• 在文字區域規則中加入vertical -align：bottom： 這會將文字區域的下邊緣與文字區域的下邊緣對齊span.
• 將display: block 添加到textarea 規則中： 這會刪除內聯行為，並將textarea 視為區塊元素，從而消除基線對齊效果。