⏱️ Leestijd: ca. 5 min.

Het CSS Box Model

In de wereld van webdesign en front-end development is er één fundamenteel principe dat je absoluut moet begrijpen om strakke, professionele lay-outs te bouwen: Het CSS Box Model.

Op het eerste gezicht zie je op een website ronde knoppen, losse teksten, afbeeldingen en navigatiebalken. Maar voor de browser is elk HTML-element een rechthoekige doos (box). Of het nu gaat om een simpele alinea (<p>), een afbeelding (<img>) of een complete <div>: de browser tekent er een onzichtbare doos omheen.

In deze les ontdek je uit welke vier lagen zo'n 'box' bestaat en hoe je met box-sizing: border-box voorkomt dat je lay-out onverwacht verspringt of kapotgaat.

1. De 4 Lagen van het Box Model

Elke doos op een webpagina is opgebouwd uit vier concentrische lagen. Van binnen naar buiten zijn dit:

+-----------------------------------+
| MARGIN (Buitenruimte)            |
|  +-----------------------------+  |
|  | BORDER (Rand)               |  |
|  |  +-----------------------+  |  |
|  |  | PADDING (Binnenruimte)|  |  |
|  |  |  +-----------------+  |  |  |
|  |  |  | CONTENT         |  |  |  |
|  |  |  | (Inhoud)        |  |  |  |
|  |  |  +-----------------+  |  |  |
|  |  +-----------------------+  |  |
|  +-----------------------------+  |
+-----------------------------------+

A. Content (Inhoud)

Dit is het hart van het element. Hier bevindt zich de feitelijke inhoud, zoals tekst, een afbeelding of een ingesloten video. De afmetingen van deze laag bepaal je met de eigenschappen width (breedte) en height (hoogte).

B. Padding (Binnenruimte)

De padding is de transparante ruimte tussen de inhoud (Content) en de rand (Border). Padding zorgt ervoor dat tekst niet 'plakt' tegen de rand van een vak of knop.

C. Border (Rand)

De border is de zichtbare of onzichtbare rand die rond de padding en de content ligt.

D. Margin (Buitenruimte)

De margin is de transparante buitenruimte rondom de border. Het duwt andere elementen op de pagina weg, zodat blokken niet tegen elkaar aan plakken.

2. Het Klassieke Berekeningsprobleem (content-box)

Standaard gebruikt elke browser de instelling box-sizing: content-box;. Dit zorgt bij beginnende webdesigners vaak voor grote frustraties.

Stel dat je een kaart ontwerpt en de breedte instelt op $300\text{px}$:

.kaart {
    width: 300px;
    padding: 20px;
    border: 5px solid #000000;
    margin: 15px;
}

Hoe breed wordt dit element uiteindelijk op het scherm? Je zou denken $300\text{px}$, maar bij de standaard content-box telt de browser de padding en border bovenop de ingestelde width!

$$\text{Totale breedte op het scherm} = \text{width} + \text{padding-links} + \text{padding-rechts} + \text{border-links} + \text{border-rechts}$$

$$\text{Totale breedte} = 300\text{px} + 20\text{px} + 20\text{px} + 5\text{px} + 5\text{px} = 350\text{px}$$

Het Probleem:
Als je twee blokken van width: 50% naast elkaar wilt zetten en je voegt $10\text{px}$ padding toe, worden de blokken samen groter dan $100\%$. Het tweede blok valt daardoor direct onder het eerste blok!

3. De Oplossing: box-sizing: border-box

Gelukkig heeft CSS een eigenschap waarmee we dit rekenprobleem definitief oplossen: box-sizing: border-box.

Wanneer je box-sizing: border-box instelt, verandert de manier waarop de browser de breedte berekent. De ingestelde width wordt nu de totale breedte van het element, inclusief de padding en de border!

$$\text{Totale breedte op het scherm} = \text{ingestelde width } (300\text{px})$$

De browser zal in dit geval de ruimte voor de content automatisch verkleinen van $300\text{px}$ naar $250\text{px}$, zodat de totale doos exact $300\text{px}$ breed blijft op je scherm ($250\text{px content} + 40\text{px padding} + 10\text{px border} = 300\text{px}$).

.kaart {
    box-sizing: border-box; /* De doos blijft nu EXACT 300px breed! */
    width: 300px;
    padding: 20px;
    border: 5px solid #000000;
}

4. De Globale CSS Reset (Beste Praktijk)

Omdat border-box zoveel logischer werkt voor het opbouwen van lay-outs, maken professionele webdesigners er een gewoonte van om dit in één keer voor alle elementen op de gehele website in te stellen.

Dit noemen we een CSS Reset. Plaats deze regel helemaal bovenaan in je CSS-bestand:

/* Globale Box-Sizing Reset */
*, *::before, *::after {
    box-sizing: border-box;
}
Tip: Met de universele selector * selecteer je elk element op de pagina. Door dit bovenaan je CSS te zetten, hoef je nooit meer handmatig uit te rekenen hoeveel padding of border je van je width moet aftrekken!

5. Compleet Praktijkvoorbeeld

In het onderstaande voorbeeld zie je twee kaarten naast elkaar. Dankzij box-sizing: border-box passen ze perfect op één regel van $100\%$ breedte, ondanks dat ze een flinke padding en rand hebben!

HTML (index.html)

<div class="container">
    <div class="kolom">
        <h2>Ontwerp</h2>
        <p>Maak visuele concepten in Figma en Adobe Illustrator.</p>
    </div>
    <div class="kolom">
        <h2>Development</h2>
        <p>Zet ontwerpen om in schone HTML5- en CSS3-code.</p>
    </div>
</div>

CSS (style.css)

/* 1. Pas border-box toe op de gehele pagina */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f1f5f9;
    padding: 40px 20px;
}

.container {
    max-width: 800px;
    margin: 0 auto;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
}

/* 2. Maak twee kolommen van exact 50% breedte */
.kolom {
    display: inline-block;
    width: 50%;            /* Neemt exact de helft van de container in */
    padding: 24px;         /* Binnenruimte verandert NIETS aan de 50% breedte! */
    border: 2px solid #cbd5e1;
    background-color: #f8fafc;
    vertical-align: top;
}

.kolom h2 {
    color: #2563eb;
    margin-bottom: 12px;
}

.kolom p {
    color: #475569;
    line-height: 1.5;
}

Samenvatting