CSS 단위 px vs em vs rem

px은 고정적인 절대값의 단위입니다. 반면 em과 rem환경에 따라 변하는 단위입니다

---

em vs rem

em 과 rem은 가변단위로서 브라우저 환경에서 px로 변환됩니다.
em은 같은 엘리먼트에서 지정된 font-size를 기준으로 px로 바뀌어 화면에 표시됩니다. 같은 엘리먼트에 설정된 폰트 크기 값이 없을 경우, 상위 요소의 폰트 사이즈가 기준이 됩니다.

* 0.5em = 16px x 0.5 = 8px
* 1em = 16 px x 1 = 16px
* 2em = 16 px x 2 = 32px
* 3em = 16 px x 3 = 48px

div {
	font-size: 16
}
div {
	//16x
	font-size : 1em 

rem은 최상위 엘리먼트에서 지정된 font-size의 값을 기준으로 변환됩니다. 대개는 HTML tag에서 지정된 font-size가 기준이 됩니다.
만약 별도의 font-size를 설정하지 않은 경우에는 각 브라우저에서 기본적으로 설정된 값을 상속 받습니다.

html {
  font-size : 10px; /*설정 안했을 때는 브라우저 기본 값으로 */
}
div {
  margin: 1.5em; /*대략 15px*/
}

rem은 기준이 되는 폰트 크기 하나로 고정되어 있는 반면, em은 같은 엘리먼트는 어디서라도 그 기준이 바뀔 수 있기 때문에 복잡한 css를 가질 경우 변환될 크기를 예측하기 어렵다는 단점이 있습니다.
많은 CSS 가이드들이 em을 사용해야만 하는 타당한 이유가 없는 경우라면 가급적 rem을 우선적으로 쓰도록 권고하고 있습니다.