title: Textarea and div padding differences in Firefox
body: <p>I made a fiddle here.  <a href="http://jsfiddle.net/pmVeR/" rel="nofollow">http://jsfiddle.net/pmVeR/</a></p>
  
  <p>The <code>textarea</code> and <code>div</code> render identically in both Safari and Chrome. But in Firefox, there is an extra <code>2px</code> padding on the right of the <code>textarea</code>, which affects the word wrapping.</p>
  
  <p>What's also mysterious is that without <code>white-space: pre-wrap;</code> this extra padding seems to vary depending on the width of the element.</p>
  
  <p>I can fix this by detecting FireFox and adding <code>padding-right:2px</code> to my <code>div</code>, but I would like to know if this can be fixed without a browser hack?</p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>div, textarea {
      font-family: Courier;
      font-size: 14px;
      margin: 0;
      padding: 0;
      outline: 0;
      resize: none;
      border: 1px solid black;
      width: 282px;
      height: 80px;
      white-space: pre-wrap;
      overflow: hidden;
      -webkit-box-sizing: border-box;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;textarea&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...&lt;/textarea&gt;
  &lt;div contenteditable="true"&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt...&lt;/div&gt;
  </code></pre>
  
  <p><strong>EDIT</strong></p>
  
  <p>The example I provided above is fixed width so you'd be able to see the problem but I need it to work for expanding widths too like this.
  <a href="http://jsfiddle.net/pmVeR/6/" rel="nofollow">http://jsfiddle.net/pmVeR/6/</a></p>