ホームページ > 記事 > ウェブフロントエンド > 異なるブラウザでテキストエリアの下に余分なスペースが表示されるのはなぜですか?
異なるブラウザでテキストエリアの下に余分なスペースが表示されるのはなぜですか?
- Patricia Arquetteオリジナル
- 2024-11-04 09:38:01562ブラウズ
テキストエリアの下の余分なスペース: ブラウザの不均衡を明らかにする
テキストエリア要素の下に余分なスペースが存在することは、状況によって厄介な問題となる可能性があります。ブラウザごとのサイズ。マークアップが単純であるにもかかわらず、この不一致は依然として存在します。
原因を解明して解決策を提供するために、基礎となるコードを詳しく調べてみましょう。
<code class="html"><html>
<head>
<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>
</head>
<body>
<div class="main">
<textarea></textarea>
</div>
</body>
</html></code>
提供されたスクリーンショットに示されているように、ブラウザーはテキストエリアの下にあるこの余分なスペースを別の方法で表示します。この不一致を解決するには、次の CSS プロパティを追加することが解決策となります。
<code class="css">textarea {
vertical-align: top;
}</code>
この不一致の背後にある理論的根拠は、インライン要素またはインラインブロック要素としての textarea の性質に関連しています。ブラウザーは、ベースラインの下に伸びる文字であるディセンダーを収容するために、その下にスペースを予約します。残念ながら、ブラウザ間でギャップ サイズが異なる正確な理由は依然としてわかりません。
以上が異なるブラウザでテキストエリアの下に余分なスペースが表示されるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。