Wat is padding?
Padding is de ruimte tussen de rand van een element en de inhoud die erin staat. Bij een knop is dat de ruimte tussen de rand en het woord erop.
Zonder padding plakt je tekst tegen de rand.
Dat oogt krap en het leest slechter.
Waar je het overal ziet
In knoppen, in kaartjes, in secties en in tabelcellen. Vrijwel elk element op je pagina heeft het.
Meer daarover lees je bij css.
Hoe je het instelt
Per zijde of voor alle vier tegelijk. Meestal geef je boven en onder een andere waarde dan links en rechts.
Meer daarover lees je bij design system.
Waarom het uitmaakt
Ruimte stuurt de aandacht. Een blok met veel lucht eromheen oogt belangrijker dan een blok dat vastzit aan zijn buren.
Meer daarover lees je bij waarom je pagina vol oogt.
Mijn vuistregels
- Werk met een vaste reeks waarden.
- Verticaal meer dan horizontaal in secties.
- Bij knoppen andersom.
- Verklein op kleine schermen.
Die eerste voorkomt dat elke sectie een eigen maat krijgt.
Het verschil met margin
Padding zit binnen de rand, margin erbuiten. Wil je twee blokken uit elkaar, dan gebruik je margin.
Meer daarover lees je bij het verschil met margin.
Bij een achtergrondkleur
Daar zie je het meteen. De kleur loopt door tot de rand, dus zonder padding raakt je tekst het gekleurde vlak.
Meer daarover lees je bij grid.