Pratiche di utilizzo di em in CSS

Diamo un'occhiata al codice HTML completo della pagina:

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

Per impostazione predefinita, tutti i tag della pagina hanno una certa dimensione del font. In realtà, il fatto è che il tag html ha per impostazione predefinita una certa dimensione del font:

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

Pertanto, possiamo specificare le dimensioni ai tag della pagina in em. In questo caso, calcoleranno le loro dimensioni relative ai genitori diretti.

Ad esempio, specifichiamo la dimensione del font per il tag main:

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

E ora specifichiamo la dimensione del font per il tag div:

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

Supponiamo di avere un codice HTML per il quale risolveremo i problemi:

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

In tutti i problemi qui sotto, convertite in em tutte le unità specificate in pixel:

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