web-dev-qa-db-fra.com

Espace supplémentaire sous la zone de texte, différent selon les navigateurs

Il y a de l'espace supplémentaire sous la balise textarea. De 1 à 4 pixels dans 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:

Screenshot

Pourquoi cela arrive-t-il? Comment supprimer cet espace supplémentaire?

htmlcsscross-browserwhitespaceremoving-whitespace
74
Roman

Ajouter vertical-align: top à textarea.

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

173
thirtydot

Dans mon cas, la réponse de thirtydot ne fonctionnait pas bien avec la bordure inférieure du parent <div>.

display: block Me convenait bien cependant.

12
André Chalella