Elk HTML-element is een rechthoekige doos. Het box model beschrijft hoe die doos is opgebouwd: content → padding → border → margin. Als je dit snapt, begrijp je waarom dingen staan waar ze staan — en hoe je dat kunt sturen.
De vier lagen van elke doos
Elke HTML-element bestaat uit vier lagen die van binnen naar buiten gaan:
Hier staat tekst / afbeelding
De eigenlijke inhoud: tekst, afbeelding of kindelelementen. Grootte bepaal je met width en height.
Ruimte binnen de border, tussen content en rand. Heeft dezelfde achtergrondkleur als het element.
De zichtbare (of onzichtbare) rand om padding + content. Heeft zelf breedte, stijl en kleur.
Ruimte buiten de border, tussen dit element en z'n buren. Altijd transparant.
Padding en border schrijven
Je kunt padding en margin op vier manieren schrijven — van uitgebreid naar compact:
/* Elke kant apart */
padding-top: 16px;
padding-right: 24px;
padding-bottom: 16px;
padding-left: 24px;
/* Shorthand: top right bottom left (met de klok mee) */
padding: 16px 24px 16px 24px;
/* Shorthand: top/bottom links/rechts */
padding: 16px 24px;
/* Alle kanten hetzelfde */
padding: 16px;
/* Border: dikte stijl kleur */
border: 2px solid #3b82f6;
border-radius: 8px; /* afgeronde hoeken */
/* Alleen één kant */
border-bottom: 1px solid #374151;Handige border-stijlen
solid
dashed
dotted
Margin & het collapse-effect
Margin werkt als padding, maar heeft één verrassing: vertical margin collapse.
/* Zelfde shorthand als padding */
margin: 0 auto; /* 0 top/bottom, auto links/rechts → centreert block-element */
margin: 24px 0;
margin-top: 32px;⚠️ Margin collapse
Als twee blok-elementen boven elkaar staan, smelten hun verticale margins samen tot de grootste van de twee — ze worden niet opgeteld.
h1 { margin-bottom: 32px; }
p { margin-top: 16px; }
/* Ruimte ertussen = 32px, NIET 48px */
Dit is opzettelijk gedrag. De oplossing: gebruik padding op de parent, of gap in Flexbox/Grid (les 6 & 7).
Centreeren met margin: margin: 0 auto werkt alleen op blok-elementen met een vaste breedte.
.container {
width: 800px; /* of max-width */
margin: 0 auto; /* centreert horizontaal */
}box-sizing: het grootste struikelblok
Standaard (content-box) telt CSS padding en border bovenop de breedte. Dat leidt tot verwarring:
❌ content-box (standaard)
.box {
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Totale breedte:
200 + 20+20 + 5+5
= 250px! */✅ border-box (aanbevolen)
.box {
box-sizing: border-box;
width: 200px;
padding: 20px;
border: 5px solid;
}
/* Totale breedte = 200px
padding + border vallen
BINNEN die 200px */⭐ Zet dit altijd bovenaan je CSS
*, *::before, *::after {
box-sizing: border-box;
}
Alle moderne CSS-frameworks (Tailwind, Bootstrap) doen dit ook. Hiermee is width: 200px altijd écht 200px breed, ongeacht padding en border.
Grootte instellen: width, height & overflow
/* Vaste breedte */
width: 300px;
/* Maximale breedte (responsive-vriendelijk) */
max-width: 600px;
width: 100%; /* neemt 100% van parent, maar nooit meer dan 600px */
/* Hoogte — wees voorzichtig */
height: 200px; /* vast: content kan overflow veroorzaken */
min-height: 100px; /* minimaal, groeit mee met content */
/* Wat als content niet past? */
overflow: visible; /* standaard: content loopt buiten de doos */
overflow: hidden; /* afkappen — ook gebruikt voor border-radius + afbeeldingen */
overflow: scroll; /* altijd scrolbalk */
overflow: auto; /* scrolbalk alleen als nodig ⭐ */visible
hidden
auto
Oefening 1 – Box model toepassen
Schrijf CSS zodat de kaart er goed uitziet. Zorg voor:
• box-sizing: border-box op alles
• .kaart: breedte 300px, padding 24px, border 2px solid #3b82f6, border-radius 12px, achtergrond #1e3a5f
• .kaart h2: margin-bottom 8px, kleur wit
• .kaart p: margin 0, kleur #93c5fd
Voorbeeld (HTML)
<style>
/* jouw CSS komt hier */
</style>
<div class="kaart">
<h2>Titel kaart</h2>
<p>Dit is de beschrijving
van de kaart.</p>
</div>Live voorbeeld
Oefening 2 – Margin & centreren
Maak een gecentreerde sectie met ruimte eromheen:
• body: achtergrond #f3f4f6, margin 0, padding 40px 20px
• .sectie: max-width 500px, margin 0 auto, padding 32px, achtergrond wit, border-radius 16px
• .sectie h1: margin-top 0, margin-bottom 12px, kleur #111827
• .sectie p: margin 0, kleur #6b7280, line-height 1.6
HTML
<style>/* jouw CSS */</style>
<div class="sectie">
<h1>Gecentreerde sectie</h1>
<p>Deze sectie staat netjes
in het midden van de pagina,
met mooie margins en padding.</p>
</div>Live voorbeeld
Quiz
Les 4 afgerond!
Je kent nu het box model, box-sizing en margin collapse — de basis van elke CSS-lay-out.