Pourquoi une zone de texte a-t-elle un espace supplémentaire en dessous dans les navigateurs ?

Élimination de l'espace supplémentaire sous la zone de texte dans les navigateurs

Lors de l'utilisation de l'élément HTML textarea, un espace supplémentaire indésirable peut apparaître en dessous, de taille variable de 1 à 4 pixels selon les navigateurs. Malgré l'utilisation d'un balisage simple, ce problème persiste.

`

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

`

Ce balisage, lorsqu'il est rendu dans différents navigateurs, affiche l'espace supplémentaire sous la zone de texte. Pour résoudre ce problème, il est nécessaire de comprendre qu'en tant qu'élément en ligne, la zone de texte réserve de l'espace pour les descendeurs dans le texte. Cependant, la raison précise de l'écart variable entre les navigateurs reste inconnue.

Pour éliminer efficacement cet espace supplémentaire, ajoutez vertical-align: top; à la zone de texte dans votre CSS :

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

En implémentant cette modification, la zone de texte sera alignée en haut de son élément parent, supprimant ainsi l'espace indésirable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!