Ben je bezig met het aanpassen van je website en kom je margin en padding tegen? Maar weet je niet goed wat het verschil is of wanneer je welke moet gebruiken? In deze handleiding leggen we je uit wat margin en padding is én wanneer je welke het beste gebruikt.
Wat is padding?
Padding is de ruimte binnen een element.
Het zorgt ervoor dat de inhoud niet tegen de rand van het element aankomt.
Voorbeeld padding:
Je hebt een knop met tekst. Door padding toe te voegen geef je de knop ‘ademruimte’ van binnenuit, waardoor de tekst mooier gecentreerd staat en het element visueel rustiger oogt.
In dit voorbeeld zie je een groene knop. Het donkergroene geeft de padding aan die aan de boven en onderkant 12.672px is, links en recht is deze 23.328px.
Padding vergroot dus de binnenruimte van een element.
Wat is margin?
Margin is de ruimte buiten een element.
Het zorgt voor afstand tussen het element en andere elementen op je pagina.
Voorbeeld margin:
Je hebt twee blokken tekst onder elkaar. Als je ruimte tussen die twee blokken wil, gebruik je margin.
Zo zie je hier in het voorbeeld, in het oranje afgebeeld, de ruimte die er is tussen de drie blokken en de grijze kader. Zo zien we dat er een margin van 100px is onderaan en bovenaan.
Margin vergroot dus de buitenruimte van een element.
Wanneer gebruik je padding of margin?
| Gebruik | Padding | Margin |
|---|---|---|
| Wil je ruimte binnen een knop, blok of sectie? | ✅ Ja | ❌ Nee |
| Wil je elementen van elkaar scheiden? | ❌ Nee | ✅ Ja |
| Vormgeving van een knop of kaart | ✅ Ja | ❌ Nee |
| Afstand tussen twee blokken of secties | ❌ Nee | ✅ Ja |