Rem-eenheden in CSS

em-eenheden zijn niet altijd handig. Het probleem is dat als je de lettergrootte van één tag verandert, deze ook verandert voor alle zijn afstammende tags, die hun grootte relatief ten opzichte van hem berekenen.

Daarom werden de rem-eenheden geïntroduceerd. De waarden van deze eenheden worden altijd berekend ten opzichte van de lettergrootte, ingesteld voor de html-tag.

Zoals je al weet, is deze waarde standaard gelijk aan 16px:

html {
	font-size: 16px;
}

Laten we een voorbeeld bekijken. Stel dat we de volgende tags hebben:

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

Laten we hun afmetingen in rem opgeven:

div {
	font-size: 2rem; /* komt overeen met 32px */
}
p {
	font-size: 2rem; /* komt overeen met 32px */
	margin: 2rem;    /* komt overeen met 32px */
}

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

<main>
	<h1>header</h1>
	<section>
		<h2>header</h2>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</section>
	<section>
		<h2>header</h2>
		<p>
			text
		</p>
		<p>
			text
		</p>
	</section>
</main>

Herschrijf alle eenheden, opgegeven in pixels, in rem:

main {
	margin: 4rem auto 2rem;
}

h1 {
	font-size: 2rem;
}
section {
	font-size: 1rem;
	margin-bottom: 2rem;
}
h2 {
	font-size: 1.5rem;
	margin-bottom: 2rem;
}
p {
	font-size: 1.25rem;
	margin-bottom: 0.75rem;
}