Pratiques d'utilisation des em en CSS

Regardons le code HTML complet de la page :

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

Par défaut, toutes les balises de la page ont une taille de police. En fait, le problème est que la balise html a par défaut une certaine taille de police :

html {
	font-size: 16px; /* valeur par défaut */
}

C'est pourquoi nous pouvons spécifier aux balises de la page des tailles en em. Dans ce cas, elles calculeront leurs tailles par rapport aux parents directs.

Spécifions, par exemple, la taille de police de la balise main :

main {
	font-size: 1.5em; /* correspond à 24px */
}

Et maintenant, spécifions la taille de police de la balise div :

div {
	font-size: 2em; /* correspond à 48px */
}

Supposons que nous ayons un code HTML, pour lequel nous résoudrons des problèmes :

<main>
	<h1>header</h1>
	<div>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</div>
	<div>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</div>
</main>

Dans tous les problèmes ci-dessous, convertissez en em toutes les unités spécifiées en pixels :

main {
	margin: 16px auto;
}

h1 {
	font-size: 32px;
}
p {
	font-size: 32px;
}

main {
	margin: 32px auto;
}

h1 {
	font-size: 32px;
}
div {
	font-size: 16px;
	margin-bottom: 32px;
}
p {
	font-size: 20px;
}