title: font size incorrect on using em unit
body: <p>Default <code>font-size</code> for my code is equivalent to <code>10px</code> or <code>0.625em</code>. So as per this rule, to set the font size of <code>&lt;p&gt;</code> as <code>7px</code> I can use <code>0.7em</code>. But in my case browser is taking the fixed font size of <code>9px</code> (checked in "computed" section of browser) even if I decrease the font size of <code>&lt;p&gt;</code> as <code>0.5em</code> or less.</p>
  
  <p><a href="https://i.stack.imgur.com/7vqRv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7vqRv.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
    font-size: 0.625em;
  }
  
  h1 {
    font-size: 2.5em; 
  }
  
  h2 {
    font-size: 1.875em; 
  }
  
  p {
    font-size: 0.7em; 
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt;This is heading 1&lt;/h1&gt;
  &lt;h2&gt;This is heading 2&lt;/h2&gt;
  &lt;p&gt;This is a paragraph.&lt;/p&gt;
  &lt;p&gt;Specifying the font-size in em allows all major browsers to resize the text.
  Unfortunately, there is still a problem with older versions of IE. When resizing the text, it becomes larger/smaller than it should.&lt;/p&gt;</code></pre>
  </div>
  </div>
  </p>