3

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.

Community
  • 1
  • 1
destan
  • 4,301
  • 3
  • 35
  • 62
  • Try to apply a css reset: http://meyerweb.com/eric/tools/css/reset/ – Tiago César Oliveira Apr 19 '13 at 13:35
  • Remember to insert the reset css file before your actual css code. – Tiago César Oliveira Apr 19 '13 at 13:35
  • Have you seen the jsFiddle link? I think there is no need for a css-reset in jsFiddle, am I wrong? Moreover this little piece of code behaves the same in minimal HTML file without any other style. – destan Apr 19 '13 at 14:20
  • Since jsFiddle does not work on the network environment i'm in now (blame the network admins :P) I was using my expertise to give an insight. That is why I haven't done it as an answer, since I was not able to test it. – Tiago César Oliveira Apr 19 '13 at 14:32
  • 1
    well, shame on admin guys over there :) By the way CSS reset doesn't provide a `display:block` style for `textarea`s which indeed solves the problem. See my answer and thanks for your time. – destan Apr 20 '13 at 18:25
  • possible duplicate of [Extra space under textarea, differs along browsers](http://stackoverflow.com/questions/7144843/extra-space-under-textarea-differs-along-browsers) – Michael Benjamin Sep 07 '15 at 14:20

2 Answers2

10

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.

destan
  • 4,301
  • 3
  • 35
  • 62
1
<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?

Kamil Oczkowski
  • 125
  • 2
  • 9