title: Html: Set font-size equal to input height
body: <p>I need to fit <code>font-size</code> to <code>input</code> height. <code>Input</code> looks like this:</p>
  
  <pre><code>&lt;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'"&gt;
  </code></pre>
  
  <p>As you can see the <code>height</code>, <code>font-size</code> and <code>line-height</code> properties are equal to <code>100px</code>.  When I <code>alert()</code> these properties by <code>jquery</code> after page loading all <code>values</code> are equal to <code>100px</code>. But text inside <code>input</code> is not fitting an <code>input height</code>. 
  I also tried to do this with a <code>span</code>:</p>
  
  <pre><code>&lt;span id="spann1" style="height:100px;font-size: 100px;border: 1px solid red;font-family: 'Times New Roman'"&gt;ddpp&lt;/span&gt;
  </code></pre>
  
  <p>As a result the <code>height</code> of <code>span</code> has changed to 113px and <code>line-height</code> became <code>142px</code>. Why? Does it mean that <code>font-size: 100px</code> is not a <code>100px</code> in reality. Then how it works?</p>
  
  <p><a href="https://i.stack.imgur.com/nV4hy.png" rel="nofollow"><img src="https://i.stack.imgur.com/nV4hy.png" alt="enter image description here"></a></p>