Why does the text inside an <input> tag get cut off even if there's already a padding?
<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>