em and rem are relative to the font size of the parent element and the root element, respectively.

• "em과 rem은 각각 상위 요소와 루트 요소의 글꼴 크기를 기준으로 합니다." 라고 MDN 문서에 적혀있다.
• rem
  • 최상위(root)의 font-size를 기준으로 변한다.
• em
  • 부모나 현재 font-size에 따라 상대적으로 변한다.
• 예시
  • root의 font-size가 16px이면 1rem은 16px이다.
  • root의 font-size가 16px이어도 부모의 font-size가 12px이면 1em은 12px이 된다.
• em의 경우 다른 요소에 영향을 받기 쉬워 유지보수가 까다롭다. 그래서 rem단위를 사용하는 것이 좋다.