rem and em

ft. pugson

by Harry Dry

HTML

<h1>REM vs EM </h1>
<div class="pill-rem">REM Label</div>
<div class="pill-em">EM Label</div>

<!-- 
1. At 1.5 rem font size. 
Pill REM has fz: 15px, padding: 10px, br: 10px 
Pill EM has fz: 15px, br: 15px, padding: 15px

2. At 0.5 rem fz
Pill REM has fz: 5px, padding: 10px, br: 10px
Pill EM has fz: 5px, padding: 5px, br: 5px

So EM fz changes with padding and br. 

-->

SCSS

html {
  font-size: 10px;
}

body {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.pill-rem {
  padding: 1rem;
  border-radius: 1rem;
  background-color: #ccc;
  margin-bottom: 2rem;
  /* font-size: 0.5rem; */
  font-size: 1.5rem;
}

.pill-em {
  padding: 1em;
  border-radius: 1em;
  /* font-size: 0.5rem; */
  font-size: 1.5rem;
  background-color: #ccc;
}