Box-sizing: content-box versus border-box
Begrijp hoe box-sizing bepaalt of padding en border worden meegenomen in berekeningen van width en height.
Box-sizing: content-box versus border-box is een gratis CSS Academy-les op CoddyKit. Dit is les 3 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 probleem met box-sizing
Standaard stelt CSS width alleen in voor het inhoudsgebied. Als je padding of border toevoegt, wordt het werkelijk weergegeven element groter, wat verwarrend en foutgevoelig is.
<div class="box">200px + padding + border = 244px rendered</div>
content-box (Standaard)
box-sizing: content-box is de standaard. width en height gelden alleen voor de inhoud. Padding en rand worden erbij opgeteld, waardoor het element groter wordt dan de ingestelde grootte.
border-box
Met box-sizing: border-box omvatten width en height de inhoud + padding + rand. Het element blijft precies de opgegeven grootte, ongeacht de padding of rand.
<div class="box">Exactly 200px rendered width</div>
De universele reset voor border-box
Pas border-box globaal toe met de universeel aanbevolen reset:
<div class="demo-box">Width stays exactly 200px</div>
Waarom inherit in plaats van *
Met een alternatief patroon kunnen componenten box-sizing overschrijven als dat nodig is:
<div class="demo-box">Inherited border-box sizing</div>
Percentagebreedte + padding
Het belangrijkste praktische voordeel van border-box merk je bij percentagebreedtes. Een element met width: 50% en 20px padding blijft precies 50% van het bovenliggende element breed, zonder overloop.
<div class="col">50% wide column with padding, no overflow</div>
border-box omvat geen margin
Zelfs met border-box is margin niet inbegrepen in de opgegeven breedte. Margins voegen altijd ruimte buiten het element toe, boven op de ingestelde afmetingen.
Geschiedenis: waarom is content-box de standaard?
Historisch verschilden browsers van mening over het boxmodel. Het W3C standaardiseerde content-box, maar IE gebruikte border-box. Moderne CSS gebruikt content-box als standaard voor compatibiliteit met het W3C, maar vrijwel alle projecten overschrijven dit met border-box.
Het boxmodel inspecteren in DevTools
In Chrome DevTools toont het paneel Elements een diagram van het boxmodel met de exacte afmetingen van inhoud, padding, rand en margin. Dit is de snelste manier om problemen met afmetingen op te sporen.
Grid en Flexbox gebruiken intern border-box
CSS Grid en Flexbox bepalen de grootte van sporen en items altijd volgens de semantiek van border-box, ongeacht de eigen instelling voor box-sizing van het element. Daardoor blijven hun berekeningen voor afmetingen voorspelbaar.
min/max met border-box
min-width, max-width, min-height en max-height werken hetzelfde als width — ze omvatten padding en rand wanneer border-box actief is.
Korte controle
Als box-sizing: border-box is ingesteld, heeft een element met width: 300px; padding: 30px; een inhoudsbreedte van:
Samenvatting
box-sizing: border-box omvat padding en rand in de opgegeven breedte, waardoor onverwachte groei wordt voorkomen. Pas dit globaal toe met *, *::before, *::after { box-sizing: border-box }. Margins zijn in geen van beide boxmodellen inbegrepen.
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 “Box-sizing: content-box versus border-box” gratis?
Ja — de volledige tekst van “Box-sizing: content-box versus border-box” 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 “Box-sizing: content-box versus border-box”?
Begrijp hoe box-sizing bepaalt of padding en border worden meegenomen in berekeningen van width en height. 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 3 van 4.
Hoe lang duurt de les “Box-sizing: content-box versus border-box”?
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