⏱️ Leestijd: ca. 6 min.

Eenheden in CSS: Absolute vs. Relatieve eenheden

Bij het vormgeven van een website krijg je constant te maken met afmetingen. Hoe groot moet een titel worden? Hoeveel ruimte laten we tussen twee blokken? En hoe breed maken we een afbeelding op een mobiel scherm?

In CSS geef je maten op met eenheden. Deze eenheden verdelen we in twee grote groepen:

  1. Absolute eenheden (zoals px): Afmetingen die altijd exact hetzelfde blijven, ongeacht het scherm of de omgeving.
  2. Relatieve eenheden (zoals rem, em, %, vw, vh): Afmetingen die meeschalen op basis van een ander element of de schermgrootte.

In deze les ontdek je wanneer je welke eenheid gebruikt om een toegankelijke en responsieve lay-out te bouwen.

1. Absolute Eenheden: Pixels (px)

Een pixel (px) is de bekendste absolute eenheid op digitale schermen. Als je een element 100px breed maakt, is het op élk scherm exact 100 fysieke beeldpunten breed.

.box {
    width: 300px;
    font-size: 16px;
    border: 2px solid #000000;
}

Voor- en nadelen van px:

Wanneer wel gebruiken?
Gebruik px voornamelijk voor fijne details die nooit mogen schalen, zoals dunne randen (border: 1px solid black;) of subtiele schaduwen (box-shadow).

2. Typografische Relatieve Eenheden: rem en em

Om websites toegankelijk en schaalbaar te maken, gebruiken we voor tekst en ruimtes liever relatieve eenheden die gebaseerd zijn op een lettergrootte (font-size).

A. De Root EM (rem)

De eenheid rem staat voor Root EM. Deze eenheid is altijd relatief ten opzichte van de lettergrootte van het hoofdelement van de pagina (<html>), de root.

Standaard staat de lettergrootte in de meeste browsers ingesteld op 16px.

$$\text{1rem} = \text{standaard font-size van } \langle\text{html}\rangle \text{ (standaard 16px)}$$

html {
    font-size: 16px; /* Dit is meestal de standaardwaarde van de browser */
}

h1 {
    font-size: 2rem; /* 2 x 16px = 32px */
    margin-bottom: 1rem; /* 1 x 16px = 16px */
}
Waarom is rem zo geweldig?
Als een bezoeker met een visuele beperking zijn browserinstelling aanpast naar 20px, schaalt alle tekst met rem automatisch en evenredig mee!

B. De Element EM (em)

De eenheid em is relatief ten opzichte van de lettergrootte van het bovenliggende element (de parent) óf het element zelf.

.card {
    font-size: 18px; /* De parent stelt font-size in op 18px */
}

.card h2 {
    font-size: 1.5em; /* 1.5 x 18px = 27px */
    padding: 1em;     /* 1 x 27px (eigen font-size) = 27px padding */
}

⚠️ Let op voor de "Compounding Effect" valkuil bij em!

Als je em nest binnen meerdere lagen HTML, kan het formaat onverwacht exponentieel groeien:

<ul class="lijst"> <!-- font-size: 1.2em (1.2 x 16px = 19.2px) -->
    <li>
        Eerste niveau
        <ul> <!-- font-size: 1.2em (1.2 x 19.2px = 23px) -->
            <li>Tweede niveau wordt ineens veel groter!</li>
        </ul>
    </li>
</ul>
Gouden regel voor typografie:
Gebruik rem als standaard voor tekst en algemene marges. Gebruik em alleen voor padding of marges binnen een component (zoals een knop) die mee moet krimpen of groeien als de knop-tekst verandert.

3. Relatieve Eenheden voor Lay-out: %, vw en vh

Wanneer je kolommen, containers of volledige schermsecties wilt maken, gebruik je eenheden die zich aanpassen aan de beschikbare ruimte of de schermgrootte.

A. Procenten (%)

Procenten zijn relatief ten opzichte van de afmetingen van het bovenliggende element (parent).

.container {
    width: 1000px;
}

.kolom-links {
    width: 60%; /* 60% van 1000px = 600px */
}

.kolom-rechts {
    width: 40%; /* 40% van 1000px = 400px */
}

B. Viewport Width (vw) & Viewport Height (vh)

De viewport is het zichtbare venster van de browser op je scherm.

.hero-banner {
    width: 100vw;  /* Neemt EXACT 100% van de schermbreedte in */
    height: 100vh; /* Neemt EXACT 100% van de schermhoogte in (volledig scherm) */
    background-color: #0f172a;
}
Toepassing van 100vh:
Ideaal voor Hero-secties of landingspagina's die bij binnenkomst direct het volledige scherm van de bezoeker moeten vullen, ongeacht of dat een telefoon of een grote laptop is.

4. Vergelijkingstabel CSS-eenheden

EenheidTypeBerekend op basis van...Best gebruikt voor...
pxAbsoluutExacte schermpixelsDunste randen (border), kleine schaduwen.
remRelatieffont-size van <html> (root)Alle typografie, algemene margins & paddings.
emRelatieffont-size van parent/element zelfComponent-interne ruimtes (zoals knoppadding).
%RelatiefBreedte/hoogte van de parentKolombreedtes en grid-indelingen.
vwRelatief$1\%$ van de schermbreedteVolledige breedte secties, responsieve titels.
vhRelatief$1\%$ van de schermhoogteVolledige schermhoogte hero-banners (100vh).

5. Compleet Praktijkvoorbeeld

In het onderstaande voorbeeld combineren we al deze eenheden op een slimme, professionele manier:

HTML (index.html)

<header class="hero">
    <div class="hero-content">
        <h1>Welkom bij Studio Viso</h1>
        <p>Wij ontwerpen de digitale ervaringen van morgen.</p>
        <a href="#ontdek" class="btn">Ontdek meer</a>
    </div>
</header>

<main class="container">
    <section class="kaart">
        <h2>Relatieve Magie</h2>
        <p>Deze kaart gebruikt een mix van rem, em en procenten voor een perfect responsief resultaat.</p>
    </section>
</main>

CSS (style.css)

/* Globale Instellingen */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px; /* Root font-size (1rem = 16px) */
    font-family: Arial, sans-serif;
}

/* 1. HERO SECTIE met vh en vw */
.hero {
    width: 100vw;               /* 100% van de schermbreedte */
    height: 80vh;               /* 80% van de schermhoogte */
    background-color: #0f172a;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.hero h1 {
    font-size: 2.5rem;          /* 2.5 x 16px = 40px (Toegankelijk!) */
    margin-bottom: 0.5rem;      /* 8px onderruimte */
}

.hero p {
    font-size: 1.125rem;        /* 18px */
    color: #94a3b8;
    margin-bottom: 1.5rem;
}

/* 2. KNOP met em (padding schaalt mee met knopgrootte!) */
.btn {
    display: inline-block;
    font-size: 1rem;            /* Knoptekst is 16px */
    padding: 0.75em 1.5em;      /* Padding past zich aan op basis van font-size */
    background-color: #2563eb;
    color: #ffffff;
    text-decoration: none;
    border-radius: 4px;
    border: 1px solid #1d4ed8;  /* Pixels voor hele dunne vaste randen */
}

/* 3. LAY-OUT CONTAINER met procenten */
.container {
    width: 90%;                 /* Neemt 90% van het scherm in op mobiel */
    max-width: 1000px;          /* Wordt nooit breder dan 1000px op desktop */
    margin: 2rem auto;          /* 32px boven/onder, horizontaal gecentreerd */
}

.kaart {
    background-color: #f8fafc;
    padding: 2rem;              /* 32px binnenruimte rondom */
    border-left: 4px solid #2563eb; /* Vaste rand van 4px */
}

Samenvatting