1em -> is relative to the font-size of its direct or nearest parent
2rem -> is relative to the html (root) font-size
1/* rem */
2Translation of rem units to pixel value is determined by the font size
3of the html element. This font size is influenced by inheritance from
4the browser font size setting unless explicitly overridden with a unit
5not subject to inheritance (px or vw).
6
7/* em */
8Translation of em units to pixel values is determined by the font size
9of the element they’re used on. This font size is influenced by
10inheritance from parent elements unless explicitly overridden with
11a unit not subject to inheritance. ---> change the menu’s font size the
12spacing (paddings etc) around the menu items will scale proportionately,
13independently of the rest of the layout.
14
11EM or 1REM (r = root em)
2The difference is inheritance.
3The Rem value is based on the root element (html).
4What is meant here is the font size for html and not the font size for the documet body.
5... Em is based on the font size of each
6Parent element.
1Explanation: If you run these code you understand differences between rem vs em
2In this example, font-size of first h1 is 48px (nearest parent) and font-size
3of second h1 is 32px ( parent of page which is html)
4<style>
5 html {
6 font-size: 32px;
7 }
8 .font {
9 font-size: 48px;
10 }
11 .em {
12 font-size: 1em;
13 }
14 .rem {
15 font-size: 1rem;
16 }
17</style>
18<body>
19 <div class="font">
20 <h1 class="em">Hey guys!</h1>
21 </div>
22 <div class="font">
23 <h1 class="rem">Hey guys!</h1>
24 </div>
25</body>