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

CssHtmlCross BrowserTextarea

Css Problem Overview

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>

Css Solutions

Solution 1 - Css

By default, I believe both Chrome and Firefox will set these elements as display: inline-block;. Set display: block in your styles and you should be all set.

Solution 2 - Css

If you want to leave it inline, simply try

vertical-align: top

Solution 3 - Css

Set display: block for your textarea.

Solution 4 - Css

Just disable resize as follow

textarea{resize: none;}

Categories
Recommended Css Solutions
Recommended Html Solutions
Recommended Cross Browser Solutions
Recommended Textarea Solutions

Previous Solution:

Integer division in sql server

Sql Server-2005

Next Solution:

Rails Object Relationships and JSON Rendering

Ruby on-RailsRubyJsonActiverecord

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionTim SantefordView Question on Stackoverflow
Solution 1 - CsskmfkView Answer on Stackoverflow
Solution 2 - CssDavid VielhuberView Answer on Stackoverflow
Solution 3 - CssHameedView Answer on Stackoverflow
Solution 4 - CssBehranG BinAView Answer on Stackoverflow