Ieder element op de HTML pagina neemt ruimte in: Een inline-element neemt enkel de ruimte binnen de zin in. Een Block element neemt de ruimte van linker tot rechter kant. Hoeveel dat is hangt af van de ouder- kind relatie. De breedte van de ouder beperkt de breedte voor het kind.

In dit voorbeeld zijn de block-elementen #boxA en #boxB kinderen van de ouder body. Ze zullen standaard de hele breedte van de body in beslag nemen en worden onder elkaar in het scherm getoond. Als de breedte van de body 80% gemaakt wordt dan wordt de breedte van box1 daarmee ook 80%.

Het positioneren van boxen bekijken we later bij flex-box. Het gaat nu eerst over de ruimte die een box inneemt.

De box heeft een inhoud (content) en een rand (border). De ruimte tussen de inhoud en de border kun je instellen met de box-eigenschap padding.

De rand zelf maak je op met de eigenschappen van border (bijvoorbeeld border-color, border-radius, border-style en box-shadow).

De ruimte buiten de box / tussen boxen maak je op met margin.

Boxen even groot houden is niet standaard ingesteld. Het instellen van de padding en border eigenschap kan de box ongewild groter maken.

Om dit te voorkomen stel je de eigenschap box-sizing in op border-box.