Wat is het verschil tussen padding en margin?

Padding is de ruimte binnen een element, margin de ruimte eromheen. Het snelste verschil om te onthouden: padding kleurt mee met je achtergrond, margin niet.

Wil je je tekst van de rand af, dan gebruik je padding.

Wil je twee blokken uit elkaar, dan margin.

De kleurproef

Geef een blok een achtergrondkleur. De padding kleurt mee, de margin blijft de kleur van de pagina eronder.

Meer daarover lees je bij css.

Wat je waarvoor gebruikt

Padding voor ruimte binnen kaartjes, knoppen en secties. Margin voor de afstand tussen die elementen onderling.

Meer daarover lees je bij design system.

Het addertje bij margin

Twee margins onder elkaar klappen samen tot de grootste van de twee. Bij padding gebeurt dat niet.

Meer daarover lees je bij grid.

Mijn vuistregels

1. Binnen een blok: padding.
2. Tussen blokken: margin.
3. Alleen margin aan één kant, meestal onder.
4. Bij verrassend grote afstanden: kijk naar samenvallende margins.

Die derde voorkomt dat afstanden dubbel optellen.

Bij een klikbaar element

Padding vergroot het klikbare gebied, margin niet. Voor een knop op een telefoon is dat het verschil tussen raken en missen.

Meer daarover lees je bij accessibility.

Wat je in een paginabouwer ziet

Meestal allebei, als twee blokjes met vier invulvelden. De bovenste is padding, de onderste margin.

Meer daarover lees je bij wat het box model is.

Veelgestelde vragen hierover