56

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>

1
  • FWIW, I can no longer reproduce this issue on Firefox 45. It still appears on Chromium 48, though. Mar 13, 2016 at 12:59

5 Answers 5

132

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.

1
  • 1
    Great. But then you also have to explicitly set margin with !important. Because Chrome seems to keep the margins of the textarea to its container "fixed" when textarea uses display: block... (You may take a look at stackoverflow.com/questions/60204423 that addresses that issue.) Feb 14, 2020 at 7:53
18

If you want to leave it inline, simply try

vertical-align: top
1
  • 1
    Never knew about this! Good if you don't want to make it a block :) Jan 25, 2017 at 15:10
10

Set display: block for your textarea.

2

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
0
-4

Just disable resize as follow

textarea{resize: none;}

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.