<body>
  <div class='em'>
    em padding & margin:
    <br>
    <button class='btn small'>button</button>
    <button class='btn'>button</button>
    <button class='btn large'>button</button>
  </div>
  <div class='rem'>
    rem padding & margin:
    <br>
    <button class='btn small'>button</button>
    <button class='btn'>button</button>
    <button class='btn large'>button</button>
  </div>
</body>
.em .btn {
  font-size: 20px;
  padding: 1em 2em;
  margin: 1em;
}
.em .small {
  font-size: 10px;
}
.em .large {
  font-size: 30px;
}
.rem .btn {
  font-size: 20px;
  padding: 1rem 2rem;
  margin: 1rem;
}
.rem .small {
  font-size: 10px;
}
.rem .large {
  font-size: 30px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.