title: How to I move text inside input text field?
body: <p>I've created a 200x50px input text field. The text that is type in that input field automatically appears in the vertical center of that input field. How can I move it inside that text field? I tried to do stuff like padding-top:20px to move it down but that also makes the input field higher. And when I make that height smaller it cuts away the text at the bottom.</p>
  
  <p>You can see a sample at: <a href="https://codepen.io/anon/pen/dENLJY" rel="nofollow noreferrer">demo</a></p>
  
  <p>I just added 1 input field:</p>
  
  <pre><code>&lt;input placeholder="fill it in"&gt;&lt;/input&gt;
  </code></pre>
  
  <p>And then used this css on it:</p>
  
  <pre><code>input {
    width:200px;
    height:50px;
    font-size: 20px;
    text-align: center;
    background-color: yellow;
  }
  </code></pre>
  
  <p>It's 200x50px high now, but I can't think of a way to move the filled in text down or up without making the input text area higher/smaller.</p>