What is the difference between em and rem units?

Answer

Both em and rem units are based on the font-size CSS property. The only difference is where they inherit their values from.

em units inherit their value from the font-size of the parent element

.parent {
  font-size: 18px;
}
.child {
  font-size: 1.5em;
}

<div class="parent">
  I'm 15px
  <div class="child">
  I'm 30px, as expected
    <div class="child">
    I'm 60px, trouble starts!
      <div class="child">
      I'm 120px, now we're really in trouble!
      </div>
    </div>
  </div>
</div>

rem units inherit their value from the font-size of the root element (html)

.html {
  font-size: 16px;
}
.parent {
  font-size: 15px;
}
.child-rem {
  font-size: 2rem;
}

<div class="parent">
  I'm 15px
  <div class="child-rem">
  I'm 32px, as expected
    <div class="child-rem">
    I'm 32px, yep!
      <div class="child-rem">
      I'm 32px, like clockwork!
      </div>
    </div>
  </div>
</div>