Praktijken voor het gebruik van em in CSS

Laten we eens kijken naar de volledige HTML-code van de pagina:

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

Standaard hebben alle tags op de pagina een bepaalde tekstgrootte. Eigenlijk komt het erop neer dat de tag html standaard een bepaalde tekstgrootte heeft:

html {
	font-size: 16px; /* standaardwaarde */
}

Daarom kunnen we de tags op de pagina groottes specificeren in em. Hierbij zullen ze hun afmetingen berekenen ten opzichte van de directe ouders.

Laten we bijvoorbeeld de tekstgrootte van de tag main specificeren:

main {
	font-size: 1.5em; /* komt overeen met 24px */
}

En laten we nu de tekstgrootte van de tag div specificeren:

div {
	font-size: 2em; /* komt overeen met 48px */
}

Stel dat we HTML-code hebben, waarvoor we opgrachten gaan oplossen:

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

Herkrijg in alle onderstaande opgrachten in em alle eenheden die in pixels zijn gespecificeerd:

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;
}