¿Cómo arreglo el margen inferior inconsistente de Textarea en Firefox y Chrome?

Question

Estoy tratando de eliminar el margen inferior que tanto FF como Chrome parecen darle a Textareas. Sorprendentemente, IE parece hacerlo correctamente. Me gustaría evitar el uso de inclusiones condicionales, pero los ajustes de CSS3 son correctos.

Código de ejemplo

.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

Por defecto, creo que tanto Chrome y Firefox fijarán estos elementos como display: inline-block;. Establezca display: block en sus estilos y debe estar todo listo.

Answer 2

Conjunto display: block para su texto.

Answer 3

Sólo deshabilitar cambiar el tamaño como sigue

área de texto {redimensionar: none;}

Answer 4

Si desea dejarlo en línea, simplemente tratar

vertical-align: top