Alles wat je op een webpagina ziet is een box. Het boxmodel van CSS regelt de opbouw van boxen en de interactie tussen boxen. Weten hoe het boxmodel werk is onmisbare CSS-basiskennis.

Je leest dit artikel en je ziet afbeeldingen en de alinea’s tekst, de content. Dat zijn duidelijk herkenbare blokken. Maar die tekst is (excuus voor het cliché) slechts het topje van de ijsberg. Een CSS-box bestaat uit meer dan alleen content. Rondom de content kan vrije ruimte zijn, opvulling (padding) genoemd. Daarna kan er een rand (border) zijn. En na de rand komt de marge (margin), de buitenruimte die andere blokken op afstand houdt. Opvulling, rand en marge kunnen elke lengte hebben die je wilt, ook nul.

Volgens het boxmodel hangen de uiteindelijke afmetingen van een box dus af van de opvulling, rand en marge, maar vooral van de content. Standaard wordt een box zo groot als nodig is om alle content te bevatten.

Intrinsieke en extrinsieke afmetingen

Dat zie je goed als je een foto zo uit de digitale camera op een webpagina zet. De box van een HTML-afbeelding – het element img van image – krijgt standaard een automatische breedte. Bij een foto worden dan de natuurlijke afmetingen gebruikt. Met 5760 bij 3840 pixels heb je op de meeste schermen aan alle kanten schuifbalken.

Je zou verwachten dat met de box van een HTML-tekstalinea – het element p van paragraph – hetzelfde gebeurt en dat deze alinea als een streep rechts uit het beeldscherm zou lopen. Maar dat gebeurt niet. Dat komt doordat diezelfde automatische breedte bij een alineabox rekening houdt met de breedte van zijn container. Dat kan een ander element zijn of het browservenster. De hoogte groeit wel automatisch mee met de inhoud.

De natuurlijke afmetingen van boxen worden ook de intrinsieke afmetingen genoemd. Afmetingen die door instellingen worden beperkt zijn extrinsieke afmetingen.

See the Pen CSS boxmodel – intrinsiek, extrinsiek, overflow by Peter Doolaard (@dool) on CodePen.dark

Overflow

Meestal heeft een ontwerper besloten dat de (tekst)kolom een maximale breedte mag hebben. Op dit blog is dat 672 pixels. De tekst houdt zich daaraan en lost de ruimtebeperking op door een hogere box te maken. Die 672 pixels is de extrinsieke breedte die de webdeveloper heeft ingesteld.

Beperk je nu ook de hoogte, dan bestaat de kans dat er niet genoeg ruimte is voor alle content. Nu zijn HTML en CSS zo ontworpen dat het tonen van de content altijd voorop staat. Dus wat gebeurt er? De tekst loopt zijn box uit. Dit verschijnsel heet overloop (overflow).

Het nare is dat de box eronder alleen maar weet wat de extrinsieke hoogte van de bovenbuurman is, bijvoorbeeld 75 pixels. Er is dus geen enkele reden om niet na 75 pixels plus de marge zijn eigen box te maken. Dat loopt niet goed af, want op die plek staat wel degelijk tekst. De nieuwe box en de overlopende tekst lopen door elkaar heen.

Nu heeft de onderste box ook te veel tekst, maar die blijft wel in de box. Daarvoor zorgt de op automatisch ingestelde overloop: overflow: auto. De richting waarin de tekst uit de box zou lopen, krijgt een schuifbalk.

Soms krijg een korte horizontale schuifbalk en lijkt er geen reden voor. Die is er natuurlijk wel. Een oorzaak kan zijn dat je een box net zo breed maakt als het venster (100vw), terwijl de body nog een marge heeft. Je kunt dergelijke schoonheidsfoutjes wegmoffelen door overloop op de body te verbergen. Het is altijd beter om de oorzaak weg te nemen.

body {
  overflow: hidden;
}

Breedte en hoogte: box-sizing

Je bent er nog niet. Bij het boxmodel van CSS horen ook de breedte en hoogte van de box. Die stel je in met de eigenschappen inline-size en block-size. Standaard stel je hiermee de afmetingen van de content in. De opvulling en rand komen er nog bij. De box wordt dus groter dan wat je instelt. Het kan zijn dat je een te grote box in een te kleine container probeert te stoppen. Dan gebeurt er hetzelfde als bij te veel tekst voor een te kleine box: overloop.

Met de eigenschap box-sizing kun je kiezen. De standaardwaarde content-box stelt de afmetingen van het contentgebied in. Met border-box zijn de ingestelde breedte en hoogte inclusief opvulling en rand. De marge is altijd extra.

Het is gebruikelijk om in de (reset)stylesheet de box-sizing in te stellen op border-box. De volgende declaratie doet dat voor elk element en voor alle pseudo-elementen ::before en ::after.

*,
::before,
::after {
  box-sizing: border-box;
}

See the Pen CSS box model – eigenschappen van een box by Peter Doolaard (@dool) on CodePen.dark

Hoe boxen zich gedragen en op elkaar reageren bepaal je met de eigenschap display. Hoe dat werkt lees je in een een volgend artikel.

Peter Doolaard

Peter Doolaard is auteur van het Handboek HTML5 en CSS3. Dat geeft een behoorlijk compleet overzicht van wat HTML en CSS te bieden hebben. Hij werkt nu aan een nieuw boek: Websites bouwen met HTML, CSS en JavaScript. Een praktisch doe-boek, met vragen, opdrachten en projecten. En natuurlijk uitleg over HTML-elementen, CSS-eigenschappen en JavaScript-opdrachten. De komende tijd publiceert Computer Creatief artikelen die je een idee geven van wat je van het nieuwe boek kunt verwachten. Bekijk alle boeken van Peter.