Het box model

Elk element op een pagina is een doos. Ook tekst, ook een afbeelding, ook een link. Zodra je dat ziet, wordt layout een stuk minder mysterieus.

content, padding, border, margin

Van binnen naar buiten:

• content: de inhoud zelf, de tekst of de afbeelding
• padding: ruimte binnen de rand, tussen de rand en de inhoud
• border: de rand zelf
• margin: ruimte buiten de rand, tussen dit element en de rest

Het verschil tussen padding en margin

De achtergrondkleur loopt wél door onder de padding en niet onder de margin. Dat is meteen de makkelijkste manier om ze uit elkaar te houden: padding hoort bij de doos, margin is de ruimte eromheen.

💡 Je ziet het in de devtools

Klik een element aan en zoek het Layout panel. Beweeg je muis over elke laag en de browser kleurt ze in op de pagina.

Dit is het snelste antwoord op "waar komt die witruimte vandaan".

Display

Uit les 2 ken je het verschil tussen block en inline al. Nu zie je wat dat betekent voor hun 'box'.

Welke 'box' een element krijgt, verander je met display.

p > span {
    display: inline-block;
    border: 4px solid oklch(0.4 0.15 145);
    padding: 2rem;
    margin: 1rem;
}

De waarden die je dit semester gebruikt: block, inline, inline-block, en vanaf volgende week flex.

display verandert geen betekenis

Een span met display: block blijft een span, en dus betekenisloos. Een div met display: inline blijft een div. Je kiest je element nog altijd op wat de inhoud is, zoals in les 2, en je regelt met CSS alleen hoe het er uit ziet.

Block box

• begint op een nieuwe lijn
• neemt standaard de volle breedte
• width en height werken
• padding, border en margin duwen de rest weg

Inline box

• blijft op dezelfde lijn
• width en height werken niet
• horizontale padding, border en margin duwen de inhoud weg
• verticale padding, border en margin overlappen de regels erboven en eronder

Dat laatste verrast iedereen. Zet je verticale padding op een span, dan loopt die over de tekst eromheen heen in plaats van ruimte te maken.

Inline-block box

De combinatie:

• blijft op dezelfde lijn
• width en height werken wel
• padding, border en margin duwen de rest weg

Demo-oefening

Box sizing

🚨 Standaard slaan width en height op de content, niet op de hele doos.

.box {
    width: 150px;
    padding: 5px;
    border: 1px solid blue;
}

Hoe breed is die doos? Niet 150px. Wel 150 + 5 + 5 + 1 + 1 = 162px. 🤯

.box {
    width: 50%;
    padding: 1rem;
    border: 1rem solid blue;
}

Twee van die dozen naast elkaar passen niet, want ze zijn elk 50% plus 4rem.

💡 De oplossing ⚠️

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

Daarmee betekent width wat je verwacht: de hele doos, inclusief padding en border. De inhoud krimpt mee in plaats van de doos te laten groeien.

Dit zet je helemaal bovenaan je CSS-bestand, en daarna denk je er nooit meer aan.
Doe je dat niet onmiddellijk... dan heb je vroeg of laat een pak problemen!

Oefening: twee boxes van 50%

🙈 Antwoord

Elke box is 50% breed plus 2rem padding plus 1rem border. Samen is dat 100% plus 6rem, en dus past de tweede er niet meer naast.

In de devtools, tabblad Computed, zie je het schema met de echte getallen. Daar lees je af dat de totale breedte groter is dan wat je in width getypt hebt.

De oplossing is één blok bovenaan:

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

Merk op dat .doos zelf ongewijzigd blijft. Dat is precies waarom je die regel één keer bovenaan zet in plaats van per element iets aan te passen.

Margin collapsing

Nog een eigenaardigheid!

Horizontale marges tellen op. Twee elementen naast elkaar met elk margin: 0 1rem hebben 2rem tussen zich. Easy.

Verticale marges vallen samen. Twee elementen onder elkaar, de ene met margin-bottom: 3rem en de andere met margin-top: 2rem, hebben 3rem tussen zich. Niet 5rem. De grootste van de twee wint, de kleinste verdwijnt.

h1 { margin-bottom: 3rem; }
p  { margin-top: 2rem; }

Dat gebeurt tussen elementen die onder elkaar staan, en ook tussen een parent en zijn kind als hun marges elkaar raken zonder iets ertussen.

Niet repareren, gebruiken

Margin collapsing is geen fout in de browser, het is bedoeld. Zonder dat zou de ruimte tussen twee paragrafen de som zijn van hun beider marges, en zou elk document eruitzien als een lijst met gaten.

Zet je ruimte dus consequent aan één kant, bijvoorbeeld altijd margin-bottom, dan heb je er nooit last van.

Logical properties

margin-left en padding-right zijn fysieke richtingen: ze gaan ervan uit dat tekst van links naar rechts loopt. Dat doet ze niet overal.

Daarom bestaat er van zowat elke richting ook een logische variant, die redeneert vanaf het begin en het einde van de leesrichting. Twee daarvan heb je meteen nodig voor je container:

Fysiek	Logisch
margin-left en margin-right samen	margin-inline
padding-left en padding-right samen	padding-inline

.container {
    margin-inline: auto;
    padding-inline: 1rem;
}

Volgende week

Er bestaat een logische variant van elke richting, en ook van width en height. Waarom dat echt uitmaakt zodra je pagina in het Arabisch of het Hebreeuws gelezen wordt, zie je volgende week.