Comment réparer la marge inférieure de Textarea incohérente dans Firefox et Chrome?

Question

J'essaie d'éliminer la marge inférieure supplémentaire que FF et Chrome semblent donner à Textareas. Étonnamment IE semble le faire correctement. Je voudrais éviter d'utiliser des inclus conditionnels mais les réglages CSS3 sont OK.

Exemple de code

.red-box { 
 
    background-color: red; 
 
    overflow: hidden; 
 
} 
 
textarea { 
 
    border: solid 1px #ddd; 
 
    margin: 0px; /* Has no effect */ 
 
}

<div class="red-box"> 
 
    <textarea>No Margin Please!</textarea> 
 
</div>

Answer 1

Par défaut, je crois que les deux Chrome et Firefox fixeront ces éléments comme display: inline-block;. Set display: block dans vos styles et vous devriez être tout ensemble.

Answer 2

Définissez display: block pour votre zone de texte.

Answer 3

Il suffit de désactiver redimensionnez comme suit

textarea {redimensionner: none;}

Answer 4

Si vous voulez laisser en ligne, essayez simplement

vertical-align: top