CODEWITHSUNDEEP
cssgoogle-chromehtmltextarea
destan
destan

Reputation: 4411

How to get rid of gap between textarea's bottom and its wrapping div in chrome browser?

I am trying to create a box like description field in https://gist.github.com/ page. Here is my minimal example. As you can see (in only chrome) there is a gap at the bottom of textarea between the wrapping div. How can I get rid of it?

<div style="
    padding: 3px;
    background-color: #eee;
    border-radius: 3px;
    width: 200px;">

      <div style="border: 1px solid #ccc;">
         <textarea style="width: 194px; resize: vertical; border: 0px; height: 124px; margin: 0px;"></textarea>
      </div>
    </div>

There is a similar but an old question here and the answer is not helpful.

Upvotes: 3

Views: 2225

Answers (2)

destan
destan

Reputation: 4411

the trick was giving the textarea display: block; credits to yuxel

just a note: css reset(yahoo's one) doesn't change textarea's display.

Upvotes: 10

Kamil Oczkowski
Kamil Oczkowski

Reputation: 135

<div style="
padding: 3px;
background-color: #eee;
border-radius: 3px;
width: 200px;">

  <div style="border: 1px solid #ccc; margin:0; padding:0;">
     <textarea style="width: 194px; resize: vertical; border: 0px; height: 124px; margin: 0px; top:0; right:0; bottom:0; left:0;"></textarea>
  </div>
</div>

Is that it?

Upvotes: 1

Related Questions