title: Inconsistent textarea handling in browsers
body: <p>Here's what I'm seeing for the markup provided below. None of the browsers are keeping the textareas in the container which is inconvenient but not that big of an issue. However, what is annoying is that no matter what I do I can't get rid of the bottom margin for the textarea in Chrome. Any suggestions?</p>
  
  <p><img src="https://i.stack.imgur.com/Hai3t.png" alt="Textarea handling in different browsers">
  Here is everything in a fiddle: <a href="http://jsfiddle.net/radu/RYZUb/" rel="nofollow noreferrer">http://jsfiddle.net/radu/RYZUb/</a></p>
  
  <p>Markup:    </p>
  
  <pre><code>&lt;div id="wrap"&gt;
      &lt;textarea id="txtInput" rows="6" cols="20"&gt;&lt;/textarea&gt;
      &lt;div id="test"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#wrap
  {
     background-color:green;
     height:210px;
     width:440px;
  }
  #txtInput
  {
      height:100px;
      width:100%;
      margin:0px;
      padding:0px;
  }
  #test
  {
      background-color:gray;
      height:100px;
      width:100%;
      margin:0;
      padding:0;
  }
  </code></pre>