px, rem, em, vh — wanneer welke CSS-eenheid gebruiken
Praktische gids voor het kiezen van de juiste CSS-eenheid voor elke situatie: layout, typografie, spatiëring en responsief design.
Absolute vs relatieve eenheden
CSS-eenheden vallen in twee brede categorieën. Absolute eenheden hebben een vaste grootte die niet verandert op basis van context. Relatieve eenheden ontlenen hun grootte aan een referentie: een ouderelement, de root-lettergrootte of de viewportafmetingen.
| Eenheid | Type | Relatief ten opzichte van |
|---|---|---|
px | Absoluut | CSS-pixel (apparaatonafhankelijk) |
pt, cm | Absoluut | Fysieke meting (drukwerk) |
rem | Relatief | Font-size van <html> |
em | Relatief | Font-size van het huidige element |
% | Relatief | Afmeting van het ouderelement |
vh, vw | Relatief | Viewport hoogte / breedte |
dvh, dvw | Relatief | Dynamisch viewport (browser-UI meegerekend) |
Voor schermontwerp, geef de voorkeur aan relatieve eenheden voor typografie en spatiëring. Absolute eenheden zijn gereserveerd voor elementen die nooit moeten schalen: randen, contouren en decoratieve details.
px — pixelprecisie
Een CSS-pixel is niet een fysieke schermpixel. Het is een apparaatonafhankelijke eenheid die zo is gedefinieerd dat één CSS-pixel bij benadering overeenkomt met 1/96ste inch op armlengte. Op high-DPI (Retina) schermen wordt één CSS-pixel weergegeven als 2 of 3 fysieke pixels — maar vanuit CSS-perspectief is het nog steeds 1px.
Wanneer px gebruiken
- Randen en contouren:
border: 1px solid— deze moeten nooit schalen - Box-shadow:
box-shadow: 0 2px 8px rgba(0,0,0,.15) - Icoongroottes bij een systeem met vaste icoongroottes
- Media query breakpoints (hoewel em veiliger is — zie Beslissingsgids)
Wanneer px NIET gebruiken
- font-size — overschrijft de browserstandaard van de gebruiker, faalt voor WCAG 1.4.4
- line-height — geef de voorkeur aan zonder eenheid (
1.5) of rem - padding en margin wanneer je wilt dat ze meeschalen met de lettergrootte
Toegankelijkheidsregel: als een gebruiker zijn browser op 200% tekstgrootte zet, negeren px-gebaseerde lettertypen dat. Rem-gebaseerde lettertypen respecteren het. Dit is niet optioneel — het is een WCAG 2.1 Niveau AA vereiste.
rem — root-relatieve schaling
rem staat voor root em. Het is altijd relatief ten opzichte van de font-size ingesteld op het <html>-element. De browserstandaard is 16px, dus 1rem = 16px tenzij je dat verandert.
/* Standaard: 1rem = 16px */
h1 { font-size: 2rem; } /* 32px */
p { font-size: 1rem; } /* 16px */
.small { font-size: .75rem; } /* 12px */Omdat rem verankerd is aan de root, stapelt het niet op wanneer elementen genest zijn — in tegenstelling tot em. Dit maakt het de standaardkeuze voor lettergroottes en spatiëring in een project.
De 62,5% truc
Het instellen van html { font-size: 62.5%; } maakt 1rem = 10px, wat hoofdrekenen vereenvoudigt (1.6rem = 16px). Het wordt tegenwoordig beschouwd als een anti-patroon omdat:
- Het de lettergroottevoorkeur van de browser van de gebruiker overschrijft
- Componenten van derden die afhankelijk zijn van de 16px-basis verkeerd worden weergegeven
- Moderne CSS-tools (
clamp(), custom properties) de noodzaak van basis-10 rekenen wegnemen
Gebruik rem met de standaard 16px root. Deel door 16 in je hoofd of gebruik een px-naar-rem converter.
em — contextrelatieve afmetingen
em is relatief ten opzichte van de font-size van het huidige element. Als er geen font-size is ingesteld op het element, erft het van zijn ouder — daarom kan em opstapelen wanneer elementen genest zijn.
/* Voorbeeld van opstapeling */
.parent { font-size: 1.2em; } /* 19.2px als de ouder 16px is */
.child { font-size: 1.2em; } /* 23.04px — 1.2 × 19.2px */Wanneer em uitblinkt
Em is de juiste eenheid wanneer je wilt dat spatiëring of afmetingen proportioneel schalen met de font-size van het component zelf, niet de globale root:
.btn {
font-size: 1rem;
padding: .5em 1.2em; /* schaalt mee met de font-size van de btn */
}
.btn-large {
font-size: 1.25rem;
/* padding schaalt automatisch mee */
}Wanneer em vermijden
- Globale lettergroottes — gebruik rem om opstapeling in de DOM-boom te voorkomen
- Layout-afmetingen — gebruik rem, % of viewport-eenheden
vh en vw — viewport-eenheden
vh (viewport hoogte) en vw (viewport breedte) zijn elk gelijk aan 1% van de overeenkomstige viewportafmeting. Ideaal voor layouts die het scherm moeten vullen.
.hero {
height: 100vh;
width: 100vw;
}Het 100vh probleem op mobiel
Op mobiele browsers nemen de adresbalk en de navigatie-chrome ruimte in — maar deze worden niet afgetrokken van 100vh. Dit zorgt ervoor dat een 100vh-element hoger is dan het zichtbare scherm, wat een ongewenste scrollbalk veroorzaakt.
De moderne oplossing: dvh
De dvh (dynamic viewport height) eenheid is hiervoor gemaakt. Het werkt zich bij wanneer de browser-UI verschijnt en verdwijnt:
.hero {
height: 100vh; /* terugval voor oudere browsers */
height: 100dvh; /* dynamisch — houdt rekening met inklapbare browser-chrome */
}Neem altijd de vh-terugval op. Andere nuttige viewport-eenheden: svh, lvh, vmin en vmax.
Snelle conversietabel (basis 16px)
Wanneer je de pixelwaarde kent maar het rem-equivalent nodig hebt, deel door 16:
| px | rem | em (1:1) |
|---|---|---|
| 8 | 0.5rem | 0.5em |
| 12 | 0.75rem | 0.75em |
| 14 | 0.875rem | 0.875em |
| 16 | 1rem | 1em |
| 18 | 1.125rem | 1.125em |
| 20 | 1.25rem | 1.25em |
| 24 | 1.5rem | 1.5em |
| 32 | 2rem | 2em |
| 48 | 3rem | 3em |
| 64 | 4rem | 4em |
Moet je een heel stylesheet converteren? Gebruik de CSS Eenheden Converter tool.
Beslissingsgids
Bij twijfel, gebruik deze tabel als snelle referentie:
| Eigenschap / Toepassing | Aanbevolen eenheid |
|---|---|
| Lettergrootte | rem |
| Padding / margin (globaal) | rem |
| Padding binnen een component | em |
| Randen, contouren, box-shadow | px |
| Layoutkolommen / breedtes | % of fr (CSS Grid) |
| Hero / volledig-scherm secties | dvh met vh terugval |
| Media query breakpoints | em (meest toegankelijk) of rem |
| Line-height | Zonder eenheid (1.5) of rem |
| Responsieve lettergrootte (vloeiend) | clamp() met rem-waarden |
Vloeiende typografie met clamp() is een krachtig patroon. Gebruik de Font Size Clamp Generator om deze waarden visueel op te bouwen.