title: Maintaining a padding inside of text-area
body: <p>Inside of my textarea, I wish to maintain a padding of 30px from the top.</p>
  
  <pre><code>textarea {
      display: block;
      width: 300px;
      height: 50px;
      padding-top: 30px;
  }
  </code></pre>
  
  <p>However, once the text-area is filled with text and the content starts scrolling. The padding is no longer maintained.</p>
  
  <p><a href="http://jsfiddle.net/w47wbq77/" rel="nofollow noreferrer">http://jsfiddle.net/w47wbq77/</a></p>
  
  <p>When you run this fiddle, initially you'll notice that the padding from top (inside of the textarea) is maintained. However, the minute you have more than 150 characters, the padding is gone.</p>
  
  <p>Any solution to this ?</p>