Warum hat ein Textbereich in Browsern darunter zusätzlichen Platz?

Entfernen von zusätzlichem Platz unter Textarea in Browsern

Bei Verwendung des Textarea-HTML-Elements kann darunter ein unerwünschter zusätzlicher Platz unterschiedlicher Größe erscheinen Browserübergreifend zwischen 1 und 4 Pixel. Trotz der Verwendung eines einfachen Markups besteht dieses Problem weiterhin.

`

<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>

`

Dieses Markup zeigt beim Rendern in verschiedenen Browsern den zusätzlichen Platz unter dem Textbereich an. Um dieses Problem zu lösen, muss man verstehen, dass der Textbereich als Inline-Element Platz für Unterlängen im Text reserviert. Der genaue Grund für die unterschiedliche Lücke zwischen den Browsern bleibt jedoch unbekannt.

Um diesen zusätzlichen Platz effektiv zu eliminieren, fügen Sie Vertical-Align: Top; zum Textbereich in Ihrem CSS:

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

Durch die Implementierung dieser Änderung wird der Textbereich am oberen Rand seines übergeordneten Elements ausgerichtet, wodurch der unerwünschte Leerraum effektiv entfernt wird.

Das obige ist der detaillierte Inhalt vonWarum hat ein Textbereich in Browsern darunter zusätzlichen Platz?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!