Why the same font size gives different results?

Why font size is different in divs?

<div style="font-size: 30px;">
    <h1>Sample text</h1>
</div>

<div>
    <h1 style="font-size: 30px;">Sample text</h1>
</div>

Why is this happening?

>Solution :

The default value for h1 tag in Chrome is 2em.

Ems are relative to the font size set in the CSS (parent element).

So in your second div you are overwriting the 2em value with 30px for the h1 element – font size is now equal to 30px;

In your first div you set the font-size of the (container) div to 30px, so now 2em is using this as the base font size – computed font size is now equal to 60px.

<section style="font-size: 15px">
  <div>base font-size: 15px</div>
  <div style="font-size: 3em">this should be 45px (15px x 3em)</div>
</section>