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.