CSS-eenheden-referentie
CSS-lengte-eenheden komen in twee families: absolute eenheden vastgezet op een fysieke grootte, en relatieve eenheden die schalen met het lettertype, de ouder of de viewport. Voor responsief ontwerp gebruik je vooral de relatieve — vooral rem, % en de viewport-eenheden.
Bijgewerkt 2026-07-06
Absolute eenheden
| Eenheid | Betekenis |
|---|---|
| px | Pixels — de basiseenheid voor schermen. 1px is één apparaatonafhankelijke pixel. |
| pt | Punten — 1/72 inch. Gebruikelijk in print-stylesheets. |
| in | Inches — 1in = 96px = 2,54cm. |
| cm | Centimeters — vooral voor print. |
| mm | Millimeters — vooral voor print. |
| pc | Pica's — 1pc = 12pt = 1/6 inch. Zeldzaam. |
Relatieve eenheden
| Eenheid | Betekenis |
|---|---|
| % | Percentage van de overeenkomstige waarde van het ouderelement. |
| em | Relatief aan de eigen lettergrootte van het element. 1.5em = 1,5× de lettergrootte. |
| rem | Relatief aan de lettergrootte van de root (html). Voorspelbaar voor consistent schalen. |
| ex | De x-hoogte van het huidige lettertype (zelden gebruikt). |
| ch | De breedte van het teken '0' in het huidige lettertype. |
| vw | 1% van de viewportbreedte. |
| vh | 1% van de viewporthoogte. |
| vmin | 1% van de kleinste viewportdimensie (breedte of hoogte). |
| vmax | 1% van de grootste viewportdimensie. |
| fr | Een fractie van de vrije ruimte in een CSS Grid-container. |
em vs. rem: het cruciale verschil
Beide schalen met de lettergrootte, maar em is relatief aan de lettergrootte van het huidige element (het stapelt zich dus op door geneste elementen), terwijl rem altijd relatief is aan de root-lettergrootte (het blijft dus voorspelbaar hoe diep genest ook). Bij twijfel geeft rem voor formaten en witruimte de minste verrassingen.
Gerelateerde tools