Het blokmodel

Geef een blok width: 200px, 16px binnenruimte en een rand van 2px en het neemt standaard 236 pixels schermbreedte in, geen 200.

Elk element is een blok

Om een pagina in te delen, zet de browser elk element om in een rechthoek. Elk blok heeft vier lagen, van binnen naar buiten. Het inhoudsgebied bevat tekst of beeld. Binnenruimte is ruimte binnen het blok, tussen de inhoud en de rand, en krijgt de achtergrondkleur van het blok. De rand is een lijn om de binnenruimte. De marge is ruimte buiten de rand die andere blokken wegduwt; hij is altijd doorzichtig. De ontwikkelaarstools van de browser tekenen precies dit schema wanneer je een element inspecteert, met de getallen ingevuld.

Verkorte notatie voor vier zijden

padding, margin en border-width accepteren één tot vier waarden, met de klok mee vanaf boven. padding: 16px stelt alle vier zijden in. padding: 8px 16px stelt boven en onder in op 8 en links en rechts op 16. padding: 4px 8px 12px 16px stelt boven, rechts, onder en links in die volgorde in. Elke zijde kun je ook afzonderlijk instellen, zoals met margin-top. border: 2px solid #333 stelt breedte, stijl en kleur tegelijk in; zonder stijl zoals solid of dashed wordt helemaal geen rand getekend.

box-sizing: de instelling die bijna iedereen verandert

Standaard stellen width en height alleen de afmetingen van het inhoudsgebied in en komen binnenruimte en rand daar nog bij. Dat is het content-box-model en het maakt indelingen onhandig: twee blokken met width: 50% en enige binnenruimte passen niet meer naast elkaar. Met box-sizing: border-box omvat de breedte de binnenruimte en rand en krimpt het inhoudsgebied om plaats te maken. Veel stylesheets beginnen door dit op elk element toe te passen met *, *::before, *::after { box-sizing: border-box; }.

Blok- en inline-elementen

Blokken gedragen zich anders afhankelijk van hun display-waarde. Blokelementen zoals p, h1 en section beginnen op een nieuwe regel en rekken uit om de breedte van hun container te vullen. Inline-elementen zoals a, strong en span staan binnen een tekstregel; width en height zijn er niet op van toepassing en hun verticale binnenruimte en marges duwen andere regels niet weg. display: inline-block zit ertussenin: het blok loopt als een woord mee in de regel, maar respecteert breedte, hoogte en binnenruimte, wat past bij kleine labels en knoppen.

Marges die samenvallen

Eén regel verrast bijna iedereen. Als de ondermarge van een blok de bovenmarge van het volgende raakt, worden ze niet opgeteld; de grootste wint. Een alinea met margin-bottom: 20px gevolgd door een kop met margin-top: 30px komt op 30 pixels afstand te staan, niet 50. Dit heet samenvallende marges en gebeurt alleen met verticale marges tussen blokken in de normale stroom, niet binnen flex- of gridcontainers. Om een blok horizontaal te centreren, geef je het een width of max-width en margin: 0 auto: de twee automatische zijmarges verdelen de vrije ruimte gelijk.