Nested <span> inside the <p> tag giving different font sizes

Question

Applying extended font size using emdirectly to a tag <p>and to a nested tag <span>gives different results.

body {
 font-size: 14px;
}

p {
 font-size: 1.4em;
}

.enlarge {
  font-size: 1.7em;
}

<p>Normal paragraph text</p>

<p class="enlarge">Enlarged text</p>

<p><span class="enlarge">This text comes out larger than the above.</span></p>

I expect that both <p class="enlarge">and <p><span class="enlarge">give me the same result.

Here is a working example: https://jsfiddle.net/huymo47b/

Answer 1

You can use rem(root em) insteadem

emrefers to the parent element, and remtakes a link from the root value (html)

Css code becomes

body {
 font-size: 14px;
}

p {
 font-size: 1.4em;
}

.enlarge {
  font-size: 1.7rem;
}

You can check the code here: https://jsfiddle.net/zrzahoro/

Update:

rem , html. , css, , html.

Answer 2

" em - , . , , ."

: CSS-Tricks

<p> 1,4 , <span class="enlarge"> - 1,7 ( ).