come posso risolvere incoerente Textarea margine inferiore in Firefox e Chrome?

Question

che sto cercando di eliminare il margine inferiore in più che sia FF e Chrome sembrano dare per textarea. Sorprendentemente, IE sembra farlo correttamente. Vorrei evitare l'uso di condizionali condizionali ma i ritocchi CSS3 sono OK.

codice di esempio

.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

Per impostazione predefinita, credo che sia Chrome e Firefox imposterà questi elementi come display: inline-block;. Situato display: block nei vostri stili e si dovrebbe essere tutto a posto.

Answer 2

Set display: block per la textarea.

Answer 3

basta disabilitare ridimensionare come seguire

textarea {ridimensionare: none;}

Answer 4

Se si vuole lasciare in linea, semplicemente provare

vertical-align: top