Textarea 和相邻元素对齐方式的差异：详细说明

尽管出现了这种情况，但代码片段中的 textarea 元素并未放置在更高的位置比它的邻居，跨度元素。这种视觉错觉源于网页布局的一个基本方面，称为基线对齐。

基线对齐和下降

渲染内联元素，例如跨度和文本区域在同一基线上，这是大多数角色所在的线。但是，某些小写字母（称为下行字母）会延伸到基线以下。

在您的情况下，span 和 textarea 元素在渲染时都会容纳潜在的下行字母。您观察到的间隙只是为这些下降部分保留的空间。

未对齐错觉

感知到的未对齐源于 span 和 textarea 元素之间的边框处理差异。 Span 的边框包裹文本和下行空间，而 Textarea 的边框则不然。这会产生文本区域位于较高位置的错觉。

可能的解决方案

要解决此视觉差异，您可以：

• 将vertical-align：bottom添加到textarea规则：这会将textarea的底部边缘与span的底部边缘对齐。
• 将display：block添加到textarea规则： 这会删除内联行为并将文本区域视为块元素，从而消除基线对齐效果。