Indentations et unités em en CSS

Supposons que nous ayons les balises suivantes :

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

Supposons que la taille de police du paragraphe soit définie en px :

p {
	font-size: 20px;
}

Définissons la marge de ce paragraphe en unités em. Dans ce cas, la taille de l'indentation sera calculée à partir de la taille de police du paragraphe, et non de son parent :

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

Supposons maintenant que la taille du paragraphe soit définie en em :

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

Définissons à nouveau le margin de notre élément. Dans ce cas, il sera toujours calculé à partir de la valeur actuelle de la police de l'élément lui-même. Alors que la valeur de la police elle-même sera calculée par rapport au parent :

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

Tâches pratiques

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

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

Déterminez quelle taille de police et d'indentation en px auront les balises div à la suite de l'exécution du code suivant :

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

Déterminez quelle taille de police et d'indentation en px auront les balises div à la suite de l'exécution du code suivant :

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

Déterminez quelle taille de police et d'indentation en px auront les balises div à la suite de l'exécution du code suivant :

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

Déterminez quelle taille de police et d'indentation en px auront les balises p à la suite de l'exécution du code suivant :

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

Déterminez quelle taille de police et d'indentation en px auront les balises p à la suite de l'exécution du code suivant :

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