CSS rem, em

em은 상위 요소의 폰트 사이즈가 기준이 됩니다.

.parent {
  font-size: 42px;
}

.children {
  font-size : 1em; // 42px
}

 

rem은 최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환됩니다.

html {
  font-size : 12px;
}

div {
  margin: 1rem;  // 12px
}

 

rem, em 차이 (em은 부모, 부모의 부모가 em을 가졌다면 자식은 곱x곱으로 계산됨)

html { font-size : 10px }
div.parent {
  margin: 2em;
}

 

rem

div.childrenRem {
  margin : 2rem; // 10px * 2 = 20px
}

 

em

div.childrenEm {
  font-size : 2em; // 10px * 2 * 2 = 40px
}