Introduction aux unités em en CSS

Les unités em permettent de définir la taille de police en pourcentage de la taille de l'élément parent. Regardons un exemple.

Supposons que nous ayons des balises imbriquées comme ceci :

<div>
	<p>
		texte
	</p>
</div>

Définissons la taille de police pour notre div :

div {
	font-size: 20px;
}

Et pour le paragraphe, définissons la taille à 2em. Cette valeur correspond à une police deux fois plus grande que la taille de la police du parent :

p {
	font-size: 2em; /* correspond à 40px */
}

Maintenant, définissons la taille du paragraphe à 0.5em. Cette valeur correspond à la moitié de la taille de la police du parent :

p {
	font-size: 0.5em; /* correspond à 10px */
}

La valeur 1em rendra la police du paragraphe identique à celle du div parent :

p {
	font-size: 1em; /* correspond à 20px */
}

Exercices pratiques

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

<ul>
	<li>texte</li>
	<li>texte</li>
	<li>texte</li>
</ul>

Déterminez quelle taille de police en px auront les balises li suite à l'exécution du code suivant :

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

Déterminez quelle taille de police en px auront les balises li suite à l'exécution du code suivant :

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

Déterminez quelle taille de police en px auront les balises li suite à l'exécution du code suivant :

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