[css] rem 과 em 의 차이

 

HTML 에서 마진이나 패딩을 줄 때 정확하게 px로 지정할 수도 있지만, 상대적인 값을 표현해 주는 단위인

rem, em을 사용하기도 한다.

 

그렇다면 이 둘의 차이는?

 

rem

기준이 되는 값을 지정한 배수로 변환해 표현한 크기.

예를 들면 기준이 되는 값, 즉 html 태그의 font-size 값이 16px 이라면 2rem은 32px을 의미한다.

html { font-size: 16px; }
div { 
	font-size: 1.5rem; /* 24px */
	margin: 2rem /* 32px */
	padding: 1.25rem /* 20px */
} 

 

em

기준이 되는 값을 지정한 배수로 변환해 표현한 크기.

예를 들면 기준이 되는 값, 즉 현재 요소의 font-size 값이 16px 이라면 2em은 32px을 의미한다.

div { font-size: 16px; }
div { 
	font-size: 1.5em; /* 24px */
	margin: 2em /* 32px */
	padding: 1.25em /* 20px */
} 

 

 

결론

rem과 em은 기준값이 다르다가 차이점이다.

rem은 최상위 태그를 기준으로 두고 em은 현재 요소를 기준으로 둔다.

 

+

 

예시

 

    html { font-size: 16px; }
    body { font-size: 2em; }
    div.container { font-size: 2em; }
    div.content1 { font-size: 2rem; } 
    div.content2 { font-size: 2em; } 

html (font-size: 32px;)
<div class="container">
    container : font-size: 2em (font-size: 64px;);
    <div class="content1 ">
        content1 : font-size: 2rem (font-size:32px);
    </div>
    <div class="content2 ">
        content1 : font-size: 2em (font-size:128px);
    </div>
</div>

 

 

결과