Why does the text inside an <input> tag get cut off even if there's already a padding?

Issue

Ok so I found out that the text inside an <input> tag still gets cut off even though the <input> tag already has a padding. You’ll notice it more when you set your font style to anything cursive.

Take a look at this image:

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.

HTML:

<input type="text" value="juvenescent" />
<div>juvenescent</div>

CSS:

input, div {
  font-family: cursive;
  font-size: 2em;
  padding: 15px 20px;
  margin-bottom: 10px;
  width: 300px;
  border: 1px solid black;
}

div {
  background-color: white;
}

Here is a link to the jsfiddle:
https://jsfiddle.net/9eLzqszx

What would be the workaround here? Obviously, I want the padding of the input text box to NOT cut the text inside it.

Solution

It looks like the curve of the J goes past the left-hand side of what the browser considers to be the edge of the letter. Instead of using padding for both sides, use padding for top/right/bottom and instead use text-indent for the left, it should do the trick!

input {
  font-family: cursive;
  font-size: 2em;
  padding: 15px 20px 15px 0;
  font-style:italic;
  margin-bottom: 10px;
  width: 300px;
  border: 1px solid black;
  text-indent: 20px;
}

https://jsfiddle.net/will0220/pxrs321f/3/

Answered By – will

Answer Checked By – Mary Flores (AngularFixing Volunteer)