Introdução às unidades em no CSS

As unidades em permitem definir o tamanho da fonte em porcentagem do tamanho do elemento pai. Vamos ver um exemplo.

Suponha que temos as seguintes tags aninhadas:

<div>
	<p>
		texto
	</p>
</div>

Vamos definir o tamanho da fonte para nossa div:

div {
	font-size: 20px;
}

E para o parágrafo, vamos definir o tamanho como 2em. Este valor corresponde a uma fonte duas vezes maior que o tamanho da fonte do elemento pai:

p {
	font-size: 2em; /* corresponde a 40px */
}

Agora, vamos definir o tamanho do parágrafo como 0.5em. Este valor corresponde à metade do tamanho da fonte do elemento pai:

p {
	font-size: 0.5em; /* corresponde a 10px */
}

O valor 1em tornará a fonte do parágrafo igual à da div pai:

p {
	font-size: 1em; /* corresponde a 20px */
}

Tarefas Práticas

Suponha que temos o código HTML para o qual resolveremos as tarefas:

<ul>
	<li>texto</li>
	<li>texto</li>
	<li>texto</li>
</ul>

Determine qual o tamanho da fonte em px que as tags li terão como resultado da execução do seguinte código:

ul {
	font-size: 10px;
}
li {
	font-size: 2em;
}

Determine qual o tamanho da fonte em px que as tags li terão como resultado da execução do seguinte código:

ul {
	font-size: 20px;
}
li {
	font-size: 1.5em;
}

Determine qual o tamanho da fonte em px que as tags li terão como resultado da execução do seguinte código:

ul {
	font-size: 30px;
}
li {
	font-size: 0.5em;
}