Welke meeteenheden zijn er in CSS?

Absolute en relatieve eenheden.

Type	Eenheid	Beschrijving
Absoluut	px	Pixels, afhankelijk van de schermresolutie.
	pt	Punten, 1/72 inch.
	cm	Centimeter.
	mm	Millimeter.
	in	Inches, 1 inch = 2.54 cm.
	pc	Pica, 1 pica = 12 punten.
Relatief	em	Relatief aan de lettergrootte van het bovenliggende element.
	rem	Relatief aan de lettergrootte van het root-element (html).
	vw	Relatief aan 1% van de breedte van het viewport.
	vh	Relatief aan 1% van de hoogte van het viewport.
	vmin	Relatief aan 1% van de kleinste zijde van het viewport (breedte of hoogte).
	vmax	Relatief aan 1% van de grootste zijde van het viewport (breedte of hoogte).
	%	Relatief aan de grootte van het bovenliggende element (of containerblok).
	ch	Relatief aan de breedte van het teken '0' van het huidige lettertype.
	ex	Relatief aan de hoogte van kleine letters (x-hoogte) van het huidige lettertype.

De keuze van de eenheid hangt af van de context: px wordt vaak gebruikt voor randen en rasterafbeeldingen, rem en em voor lettertypen en marges, wat zorgt voor betere schaalbaarheid op verschillende apparaten. Percentages zijn handig voor responsieve lay-outs.

/* Voorbeeld gebruik */
.container {
  width: 80%; /* Relatief aan de ouder */
  margin: 1rem auto; /* Relatief aan de lettergrootte van html */
}

.box {
  padding: 20px; /* Absolute waarde */
  font-size: 1.2em; /* Relatief aan de lettergrootte van de ouder */
  width: 50vw; /* Relatief aan de breedte van het viewport */
}