Width, height, margin en padding begrijpen
Leer hoe width, height, margin en padding de afmetingen en tussenruimten van elementen bepalen.
Width, height, margin en padding begrijpen is een gratis CSS Academy-les op CoddyKit. Dit is les 1 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject CSS Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus CSS Academy bevat in totaal 4 lessen.
Het concept van het boxmodel
Elk HTML-element wordt weergegeven als een rechthoekig vak. Het CSS-boxmodel beschrijft de vier lagen waaruit dit vak van binnen naar buiten bestaat: content → padding → border → margin.
width en height
width en height bepalen de afmetingen van het inhoudsgebied. Standaard worden padding en border boven op deze grootte toegevoegd.
<div class="box"></div>
padding
padding is transparante ruimte binnen de border, tussen de inhoud en de rand van de border. Het maakt deel uit van het klikbare gebied en het gebied waarop de achtergrond wordt getekend.
<div class="card">Card content</div>
Volledige notatie voor padding
Elke zijde kan afzonderlijk worden ingesteld:
<div class="element">Padded element</div>
margin
margin is transparante ruimte buiten de border. Deze duwt andere elementen weg. Negatieve marges brengen elementen dichter bij elkaar of laten ze overlappen.
<div class="section">Centered section with bottom margin</div>
Samenvoegen van marges
Verticale marges worden samengevoegd tussen aangrenzende blokelementen: de werkelijke tussenruimte is de grootste van de twee marges, niet de som ervan. Horizontale marges worden nooit samengevoegd.
<h2>Heading</h2>
<p>Paragraph below — margins collapse to 30px, not 50px.</p>
Samenvoegen van marges voorkomen
Het samenvoegen van marges wordt voorkomen wanneer:
- Elementen kinderen van flex of grid zijn
- Een ouder
overflow: hiddenheeft - Een ouder
paddingtussen zichzelf en het eerste kind heeft - Een inline-element de elementen op hetzelfde niveau van elkaar scheidt
auto-marges
Als je horizontale marges op auto instelt voor een blokelement met een vaste breedte, wordt het binnen de container gecentreerd. Dit is de klassieke techniek om te centreren.
<div class="centered">Centered block, max 800px wide</div>
min-width max-width min-height max-height
Beperk afmetingen met minimale en maximale grenzen, zodat elementen op verschillende schermformaten leesbaar blijven:
<div class="content">Readable content column capped at 65 characters wide.</div>
De totale grootte van een element berekenen
In het standaardmodel content-box is de totale breedte = width + padding-left + padding-right + border-left + border-right. Dit kan verrassend zijn en is de reden waarom border-box de voorkeur heeft.
Logische eigenschappen voor margin en padding
Moderne CSS biedt logische equivalenten: margin-block, margin-inline, padding-block-start enzovoort. Deze passen zich automatisch aan de schrijfrichting aan.
<div class="card">Logical padding-block/inline</div>
Korte controle
Welke lagen zijn opgenomen in de totale weergegeven breedte van een blokelement in het standaardboxmodel?
Samenvatting
De lagen van het boxmodel zijn content, padding, border en margin. Padding bevindt zich binnen de border; margin bevindt zich erbuiten. Verticale marges worden samengevoegd tussen aangrenzende elementen op hetzelfde niveau. Gebruik margin: 0 auto met een vaste breedte om blokelementen te centreren.
Leer CSS met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 40
- Lessen
- 159
Veelgestelde vragen
Is de les “Width, height, margin en padding begrijpen” gratis?
Ja — de volledige tekst van “Width, height, margin en padding begrijpen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus CSS Academy wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus CSS Academy bevat in totaal 4 lessen.
Wat leer ik in “Width, height, margin en padding begrijpen”?
Leer hoe width, height, margin en padding de afmetingen en tussenruimten van elementen bepalen. Je oefent met CSS Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met CSS Academy te beginnen?
Ervaring vooraf is niet nodig. CSS Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 1 van 4.
Hoe lang duurt de les “Width, height, margin en padding begrijpen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over CSS Academy?
Ja. Elke les over CSS Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- Width, height, margin en padding begrijpen
- Randstijlen, -breedte en -kleur
- Box-sizing: content-box versus border-box
- Outline en box-shadow