Wat is het verschil tussen marge en padding?
Het verschil tussen marge en padding is de kant van de rand waar de ruimte zit.
Padding zit binnen het element, tussen de rand en de inhoud. Marge zit erbuiten, tussen het element en zijn buren.
Verder doen ze hetzelfde: ruimte maken.
Wanneer je padding kiest
Als de ruimte bij het element hoort. Een knop met een achtergrondkleur heeft padding nodig, anders plakt de tekst tegen de rand.
Meer daarover lees je bij ui.
Wanneer je marge kiest
Als de ruimte tussen twee dingen hoort. De afstand tussen een kop en de alinea eronder is een marge.
Meer daarover lees je bij hoeveel ruimte je aanhoudt.
De valkuil van klappende marges
Twee marges onder elkaar tellen niet op: de grootste wint. Dat verrast bijna iedereen een keer.
Meer daarover lees je bij design system.
Mijn werkwijze
- Achtergrondkleur of rand? Dan padding.
- Afstand tot de buren? Dan marge.
- Kies één richting, meestal onder.
- Gebruik dezelfde reeks waarden overal.
Die derde voorkomt dubbele ruimte: als alles alleen naar onderen duwt, tel je nooit twee marges bij elkaar op.
Wat het met klikgedrag doet
Padding vergroot het klikbare oppervlak van een knop, marge niet. Op mobiel scheelt dat echt.
Meer daarover lees je bij nadruk geven met ruimte.
In een paginabouwer
Elke bouwer noemt het anders, maar de begrippen blijven gelijk. Zoek naar binnenruimte en buitenruimte.
Meer daarover lees je bij whitespace.