help you fix your problem Check this JS Fiddle, if you're trying to make the font size "responsive", as it grows up for bigger screens and shrinks down for smaller ones, you need to use the view units for width vw, and for height vh
font-size:4vw; /* font size is 4% of the full width of the view */
it should still fix some issue If you inspect the inline box using a browser’s Developer Tools (hit F12 to open them), you can see that its height is indeed 12px, as set in your code. This happens because there is nothing in it that would require more height; in general, the exact calculation of heights of inline blocks is browser-dependent. The font size of the text is still the browser default, typically 16px. The font size does not mean the height of any particular letter. It is just a fundamental property of the font; typographers usually design characters so that they - together with ascenders, descenders, and diacritic marks - fit into the limits set by the font size (or extend over them just a little), and normally most letters have smaller height.
CSS - calc() on font-size - changing font size based on container size
like below fixes the issue Calc is still in it's infancy in terms of support & usefulness. By design it's really just there for doing simple math, like (100% - 20px). It really won't do the math complex enough to make the calculations possible. You are looking for a solution that will size the text based on the amount of space the letters physically take up horizontally (which depends on the letter's individual sizing) and the amount of space available for the containing div. CSS is abstracted away from the actual element's contents, and it has no way to really discern if something currently "fits" or not. It can layout guidelines for how to handle things when they do or don't fit, but it can't adjust itself according to the content like you want it to. (It's not just you, we've all faced this problem or a similar version of it at some point.)
Keep child element's font-size unaffected by root element's font-size
<p>Regular paragraph text</p>
I don't want the <code>font-size</code> of this paragrah to be
affected by the <code>html</code> element's <code>font-size</code>.
I want this element's <code>font-size</code> to stay at 16 pixels
at all times as the page is resized.
NicEditor font size mody from <font size='1'> tag to <span style='font-size: 8px'>