<div class="em">
  <p>1em</p>
</div>

<div class="rem">
  <p>1rem</p>
</div>

<div class="ex">
  <p>1ex</p>
</div>

<div class="ch">
  <p>1ch</p>
</div>

<!-- Experimental units -->

<div class="cap">
  <p>1cap</p>
</div>

<div class="lh">
  <p>1lh</p>
</div>

<div class="rlh">
  <p>1rlh</p>
</div>
body {
  font-family: Roboto, sans-serif;
}

div {
  border: 2px solid;
  margin-bottom: 30px;
}

p {
  margin: 0;
  text-align: center;
}

.em {
  padding: 2em;
  font-size: 1em;
  border-color: #FF6D00;
  color: #FF6D00;
}

.rem {
  padding: 2rem;
  font-size: 1rem;
  border-color: #00E676;
  color: #00E676;
}

.ex {
  padding: 2ex;
  font-size: 1ex;
  border-color: #448AFF;
  color: #448AFF;
}

.ch {
  padding: 2ch;
  font-size: 1ch;
  border-color: #7C4DFF;
  color: #7C4DFF;
}

.cap {
  padding: 2cap;,
  font-size: 1cap;
  border-color: #4E342E;
  color: #4E342E;
}

.lh {
  padding: 2lh;
  font-size: 1lh;
  border-color: #37474F;
  color: #37474F;
}

.rlh {
  padding: 2rlh;
  font-size: 1rlh;
  border-color: #424242;
  color: #424242;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.