How do I fix inconsistent Textarea bottom margin in Firefox and Chrome?

user_78685 0
Viewed 15353

I'm trying to eliminate the extra bottom margin that both FF and Chrome seem to give to Textareas. Surprisingly IE seems to do it correctly. I would like to avoid using conditional includes but CSS3 tweaks are OK.

Sample 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>

textarea cross-browser css html
5 Answers

Just bit by this in 2022 Chrome!

<textarea> has a default of vertical-align: baseline, which visually manifests as excess bottom margin.

Interestingly, none of the most popular reset/normalize stylesheets change this property. In my personal reset, I have added:

vertical-align: bottom
user_6491670
Related