De l'espace supplémentaire en vertu de la textarea, diffère sur les navigateurs

Il y a un peu d'espace supplémentaire en vertu de la balise textarea. De 1 à 4 pixels dans les différents navigateurs. Le balisage est très simple:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

Voici comment il est rendu dans les navigateurs:

De l'espace supplémentaire en vertu de la textarea, diffère sur les navigateurs

Pourquoi est-ce arrivé? Comment faire pour supprimer cet espace supplémentaire?

InformationsquelleAutor Roman | 2011-08-22
  1. 170

    Ajouter vertical-align: top à textarea.

    La raison de l'écart que textarea est un inline (ou inline-block) de l'élément, et l'écart est l'espace réservé à le descendeur dans le texte. Je ne sais pas exactement pourquoi l'écart est différent entre les différents navigateurs.

    • Me battre pour elle, +1!
    • Cela fonctionne à 100%. Vous êtes des génies.
    • Total génie!!!
    • vous êtes un sauveteur!
    • vous êtes une légende sir
    • vous êtes fabuleux!

    InformationsquelleAutor thirtydot
  2. 12

    Dans mon cas, thirtydot's réponse ne fonctionne pas bien avec le parent <div>'s de la bordure inférieure.

    display: block me convenait bien mais.

    InformationsquelleAutor André Chalella