title: Why does the text inside an <input> tag get cut off even if there's already a padding?
body: <p>Ok so I found out that the text inside an <code>&lt;input&gt;</code> tag still gets cut off even though the <code>&lt;input&gt;</code> tag already has a padding. You'll notice it more when you set your font style to anything cursive.</p>
  <p>Take a look at this image:
  <a href="https://i.stack.imgur.com/ttFVF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ttFVF.png" alt="" /></a></p>
  <p>The first text box in the screenshot is an input of type=text and the second text box is just a div. The input text box cuts off the tail of character 'j', while the div text box does not.</p>
  <p>HTML:</p>
  <pre><code>&lt;input type=&quot;text&quot; value=&quot;juvenescent&quot; /&gt;
  &lt;div&gt;juvenescent&lt;/div&gt;
  </code></pre>
  <p>CSS:</p>
  <pre class="lang-css prettyprint-override"><code>input, div {
    font-family: cursive;
    font-size: 2em;
    padding: 15px 20px;
    margin-bottom: 10px;
    width: 300px;
    border: 1px solid black;
  }
  
  div {
    background-color: white;
  }
  </code></pre>
  <p>Here is a link to the jsfiddle:
  <a href="https://jsfiddle.net/9eLzqszx/" rel="nofollow noreferrer">https://jsfiddle.net/9eLzqszx</a></p>
  <p>What would be the workaround here? Obviously, I want the padding of the input text box to NOT cut the text inside it.</p>