REM vs EM vs PX

Difference between REM vs EM vs PX

by Aashish Manandhar

HTML

<div class="rem">
  <span class="lg">REM</span><span class="sm">REM</span>
</div>
<div class="em">
  <span class="lg">EM</span><span class="sm">EM</span>
</div>
<div class="px">
  <span class="lg">PX</span><span class="sm">PX</span>
</div>

CSS

* {
  font-size:10px; // rem depends on this
}
span{
  display:inline-block;
  min-height: 100px;
  min-width: 100px;
  background: red;
  margin: 2px; 
}
.em span{
  border-radius: 3em;
}
.rem span{
  border-radius: 2rem;
}
.px span{
  border-radius: 25px; // px doesn't depend on font size
}
.lg{
  font-size: 20px; // em depends on this
}
.sm{
  font-size: 10px; // em depends on this
}