89 votes

Espace supplémentaire sous textarea, diffère selon les navigateurs

Il y a un 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 cela est rendu dans les navigateurs:

Capture d'écran

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

221voto

thirtydot Points 114021

Ajoutez vertical-align: top à textarea .

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X