<div class="container">
  <p>The following demo demonstrates how <code>em</code>s cascade and multiply against themselves when applied to <code>font-size</code>, and that other properties set in <code>em</code> are computed based on the element's font size.</p>
  <div class="father">
    font-size 20px 
    <br/>
    padding 0.5em = 0.5*20 = 10px
    <div class="child">
      font-size 1.5em = 1.5*20 = 30px
      <br>
      padding 0.5em = 0.5*30 = 15px
      <div class="grandchild">
        font-size 1.5em = 1.5*30 = 45px
        <br>
        padding 0.5em = 0.5*45 = 22.5px
      </div>
    </div>
  </div>
</div>
body {
  background-color: #F5F5F5;
  color: #555;
  font-size: 1.1em;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.container {
  margin: 40px auto;
  width: 100%;
  max-width: 700px;
}

.father {
  padding: 20px;
  background-color: rgba(0, 153, 204, .25);
  color: white;
  width: 10em;
  height: 100px;
  padding: .5em;
  font-size: 20px;
}

.child {
  font-size: 1.5em;
  padding: .5em;
  width: 10em;
  background-color: rgba(0, 153, 204, .5);
}

.grandchild {
  font-size: 1.5em;
  padding: .5em;
  width: 10em;
  background-color: rgba(0, 153, 204, .75);
}