Dimensions and Units

<div id="parent">
  <h1 id="child"> Relative unit 'em' </h1>
</div>

#parent {
  font-size: 20px;
}
#child {
  font-size: 1em;
  /*
  font-size = 1 em = 1*20px = 20px
  */
  width: 5em;
  height: 5em;
  /*
  width & height = 5em = 5*font-size = 5*20px = 100px
  */
  background-color: peachpuff;
}

<div id="parent">
  <div id="child">
    Relative unit 'em'
  </div>
</div>

#child {
  font-size: 1em;
  width: 10em;
  height: 10em;
  /* width & height = 10em = 10*font-size = 10*16px = 160px */
  background-color: orange;
}