ブラウザのテキストエリアの下に余分なスペースがあるのはなぜですか?

ブラウザの Textarea の下の余分なスペースを削除する

textarea HTML 要素を使用すると、その下にサイズの異なる余分なスペースが表示される場合があります。ブラウザ間で 1 ～ 4 ピクセル。単純なマークアップを採用しているにもかかわらず、この問題は残ります。

`

<style>
    body {
        margin: 0;
        padding: 0;
    }
    .main {
        background-color: red;
    }
    textarea {
        background-color: gray;
        resize: none;
        margin: 0;
        border: 0 none;
        padding: 10px;
        height: 50px;
        overflow: hidden;
    }
</style>

<div class="main">
    <textarea></textarea>
</div>

`

このマークアップは、さまざまなブラウザーでレンダリングされると、テキストエリアの下に余分なスペースが表示されます。この問題に対処するには、テキストエリアはインライン要素として、テキスト内のディセンダー用のスペースを予約していることを理解する必要があります。ただし、ブラウザ間でギャップが異なる正確な理由は不明のままです。

この余分なスペースを効果的に削除するには、vertical-align: top; を追加します。 CSS の textarea に追加します:

<code class="css">textarea {
    ...
    vertical-align: top;
    ...
}</code>

この変更を実装すると、textarea が親要素の先頭に揃えられ、不要なスペースが効果的に削除されます。

以上がブラウザのテキストエリアの下に余分なスペースがあるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。