em vs rem in css

em is relative to the font-size of the parent element.
rem is relative to the font-size of the root(html) element.

By default, in most of the browsers, 1em is 16px if font-size is not set on any of the parent elements.

When em is used to set any other property other than font-size, it is relative to the elements font-size.


Ex:

html{

  font-size: 15px;

}

.parent {

    font-size: 20px;

}

.child {
 
    font-size: 2em;  /* 40px will be the font-size */
    padding: 1.5em; /* 60px(1.5 * 40) will be the padding */

}

.child1{

  font-size: 2rem; /* 30 px will be the font size */
  padding: 1.5rem; /* 45 px will be the padding */

}


Sources:

https://alligator.io/css/rem-vs-em-units/

https://developer.mozilla.org/en-US/docs/Web/CSS/font-size#relative-size