CSS에서의 em 단위와 여백

다음과 같은 태그가 있다고 가정해 봅시다:

<div>
	<p>
		text
	</p>
</div>

단락의 글꼴 크기가 px로 설정되어 있다고 가정합니다:

p {
	font-size: 20px;
}

이 단락의 여백을 em 단위로 설정해 봅시다. 이 경우, 여백 크기는 부모 요소가 아닌 단락 자체의 글꼴 크기를 기준으로 계산됩니다:

p {
	font-size: 20px;
	margin: 2em;  /* 40px에 해당 */
}

이제 단락의 크기가 em로 설정되었다고 가정합니다:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* 40px에 해당 */
}

요소에 margin을 다시 설정해 봅시다. 이 경우, 여백은 여전히 요소 자체의 현재 글꼴 크기를 기준으로 계산됩니다. 이때 글꼴 크기 자체는 부모 요소를 기준으로 계산됩니다:

div {
	font-size: 20px;
}
p {
	font-size: 2em; /* 40px에 해당 */
	margin: 2em;    /* 80px에 해당 */
}

실습 문제

다음 HTML 코드를 바탕으로 문제를 풀어보겠습니다:

<section>
	<div>
		<p>
			text
		</p>
	</div>
</section>

다음 코드를 실행한 결과, div 태그의 글꼴 크기와 px 단위의 여백이 어떻게 될지 결정하십시오:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
	margin: 2em;
}

다음 코드를 실행한 결과, div 태그의 글꼴 크기와 px 단위의 여백이 어떻게 될지 결정하십시오:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
	margin: 3em;
}

다음 코드를 실행한 결과, div 태그의 글꼴 크기와 px 단위의 여백이 어떻게 될지 결정하십시오:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
	margin: 0.5em;
}

다음 코드를 실행한 결과, p 태그의 글꼴 크기와 px 단위의 여백이 어떻게 될지 결정하십시오:

section {
	font-size: 10px;
}
div {
	font-size: 2em;
}
p {
	font-size: 2em;
	margin: 2em;
}

다음 코드를 실행한 결과, p 태그의 글꼴 크기와 px 단위의 여백이 어떻게 될지 결정하십시오:

section {
	font-size: 10px;
}
div {
	font-size: 1.5em;
}
p {
	font-size: 1em;
	margin: 1.5em;
}