Nested inside a tag giving different font size

Question

Applying an enlarged font-size using em directly to a

tag and to the nested tag are giving different results.

Answer 1

You can use rem (root em) instead of em

em is relative to the parent element, while rem takes reference from the root (html) value

The css code becomes

body {
 font-size: 14px;
}

p {
 font-size: 1.4em;
}

.enlarge {
  font-size: 1.7rem;
}

The code can be tested here: https://jsfiddle.net/zrzahoro/

Update:

The rem takes reference from root, which it html tag. If you want to control the value of font being referenced in your css instead of letting it use the browser default value, give a fixed font-size to html tag too.

Answer 2

"The em unit is a relative unit based on the computed value of the font size of the parent element. This means that child elements are always dependent on their parent to set their font-size."

Reference: CSS-Tricks

Your <p> tag has already 1,4 of normal size and <span class="enlarge"> is 1,7 of its parent (which is already enlarged).