Imagine having an input field with a set height of 25px. If you decide to increase the font size within that text field, even though the dimensions remain constant, it may seem like extra padding has been added. Initially, at a normal font size, it appears like this:
BEFORE
https://i.stack.imgur.com/i5AP3.gif
Now, when the font size is increased, it gives the impression that additional padding has been inserted, similar to this:
AFTER
https://i.stack.imgur.com/wSb3f.gif
Despite checking the padding during debugging and attempting to apply box-sizing:border-box, the issue persists unchanged. Any assistance in resolving this matter would be greatly appreciated. Thank you.
You can easily replicate this scenario by adjusting the font-size.
<body>
<div>
<input type="text" value="HI"/>
<input type="text" value="HELLO" style="font-size: 900px; height: 30px; width: 100%;"/>
<input type="text" value="HI"/>
</div>
</body>