Práticas de uso de em no CSS

Vamos dar uma olhada no código HTML completo da página:

<html>
	<head>
		<title></title>
	</head>
	<body>
		<main>
			<div>
				<p>
					texto
				</p>
			</div>
		</main>
	</body>
<html>

Por padrão, todas as tags da página possuem um determinado tamanho de fonte. Na verdade, o que acontece é que a tag html tem, por padrão, um determinado tamanho de fonte:

html {
	font-size: 16px; /* valor padrão */
}

Portanto, podemos especificar tamanhos para as tags da página em em. Nesse caso, eles calcularão seus tamanhos em relação aos pais diretos.

Vamos, por exemplo, definir o tamanho da fonte para a tag main:

main {
	font-size: 1.5em; /* corresponde a 24px */
}

E agora vamos definir o tamanho da fonte para a tag div:

div {
	font-size: 2em; /* corresponde a 48px */
}

Suponha que temos um código HTML, para o qual vamos resolver problemas:

<main>
	<h1>cabeçalho</h1>
	<div>
		<p>
			texto
		</p>
		<p>
			texto
		</p>
	</div>
	<div>
		<p>
			texto
		</p>
		<p>
			texto
		</p>
	</div>
</main>

Em todos os problemas abaixo, reescreva em em todas as unidades especificadas em pixels:

main {
	margin: 1em auto;
}

h1 {
	font-size: 2em;
}
p {
	font-size: 2em;
}

main {
	margin: 2em auto;
}

h1 {
	font-size: 2em;
}
div {
	font-size: 1em;
	margin-bottom: 2em;
}
p {
	font-size: 1.25em;
}