가장 익숙한 단위입니다. 절대단위이며, 사용중인 디스플레이 크기와 거의 일치합니다.
상대단위이며 현재 요소의 폰트크기와 같습니다. 만약 head
의 폰트 크기가 24px이고 아래쪽에 2em
크기의 패딩을 주었다면, 아래쪽 패딩 크기는 48px(24px X 2)가 됩니다.
rem
은 em
과 한가지를 제외하고 거의 유사합니다. em
과 다른점은 루트 요소인 <html>
에 상대적이라는 점 입니다. <html>
태그는 16px을 기본값으로 가지고 있습니다. 따라서 1rem
은 16px 입니다.
사용가능한 공간 중, 얼마나 사용할지를 나타냅니다.