TextArea が隣接するスパンよりも高く表示されるのはなぜですか?

なぜ私の TextArea は隣接する要素よりも高いのですか?

textarea 要素は隣接するspan要素よりも高い位置にあるように見えるかもしれませんが、

Baseline Alignment

span 要素と textarea 要素は両方ともインライン要素です。ブラウザでは、インライン要素の下にディセンダ (ベースラインの下に伸びる小文字) を収容するためのスペースが用意されています。この間隔により、同じ行上のすべての要素がベースラインで整列するようになります。

TextArea の機能

TextArea 要素は、通常、ディセンダー用のスペースを必要としません。ラッピングボックス。ただし、ブラウザは、隣接するテキストや要素が同じ行を共有する可能性を考慮してこのスペースを提供します。

錯視

提供された例の位置ずれの錯視要素の周囲の境界によってさらに悪化します。テキストエリアの周囲の赤い境界線はディセンダースペースを除外し、スパン要素の周囲の青い境界線はテキストとディセンダースペースの両方を囲みます。赤い境界線を削除すると、認識されるずれが軽減されます。

解決策

認識されるずれを修正するには、次の解決策のいずれかを選択できます:

1. vertical-align:bottom を textarea の CSS ルールに追加します。これにより、textarea がコンテナの下部に配置されます。
2. display: block を textarea CSS ルールに追加します。これにより、ブロックに変換されます。全高の要素。

以上がTextArea が隣接するスパンよりも高く表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。