Html: Set font-size equal to input height

Question

I need to fit font-size to input height. Input looks like this:

<input type="text" id="inputt" name="test" value="ddpp" style="height:100px; width:200px; font-size:100px; line-height:100px; font-family: 'Times New Roman'">

As you can see the height, font-size and line-height properties are equal to 100px. When I alert() these properties by jquery after page loading all values are equal to 100px. But text inside input is not fitting an input height. I also tried to do this with a span:

<span id="spann1" style="height:100px;font-size: 100px;border: 1px solid red;font-family: 'Times New Roman'">ddpp</span>

As a result the height of span has changed to 113px and line-height became 142px. Why? Does it mean that font-size: 100px is not a 100px in reality. Then how it works?

Answer 1

you can change display property . The display property specifies if/how an element is displayed. Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.

css_display_visibility

span has default inline value , you can change display to inline-block .

Inline elements:

respect left & right margins and padding, but not top & bottom
cannot have a width and height set
allow other elements to sit to their left and right.

Inline-block elements:

allow other elements to sit to their left and right
respect top & bottom margins and padding
respect height and width

CSS display: inline vs inline-block

good luck