Jouw elementen op jouw landingspagina verschuiven? Dat kan met behulp van marge en padding!

Marge - Dit is de ruimte buiten de rand van een element. Het creëert afstand tussen het betreffende element en de omringende elementen. De marge zorgt ervoor dat een element niet direct tegen een ander element aan zit. Marge beïnvloedt de positie van het element ten opzichte van andere elementen.

Padding - Padding is de ruimte binnen de rand van een element, tussen de rand en de inhoud van dat element (zoals tekst of afbeeldingen). Het vergroot de afstand tussen de inhoud van het element en de rand ervan, waardoor er meer ademruimte ontstaat binnen het element zelf. Eigenlijk past het dus de grootte aan van het element zelf.

Wil je jouw tekst of een afbeelding net een stukje naar de zijkant of naar boven of onder verschuiven? Dit kun je oplossen door met de marges te spelen.

Ik neem even een afbeelding als voorbeeld, maar het werkt precies hetzelfde als een stukje tekst, knop of een ander element!

Door op de afbeelding te klikken komt er aan de linkerkant een optie om de marge aan te passen. Je kunt de afbeelding dus naar boven en naar beneden verplaatsen,

maar ook naar links en naar rechts!

Hoe groter de waarde, hoe meer ruimte er aan die kant gecreëerd wordt.

Met de padding pas je dus de ruimte binnen de rand van een element aan:

Ook dit kun je natuurlijk links en rechts aanpassen:

Zo kan je net als het voorbeeld hierboven makkelijk je knopgroep centreren op je pagina!

Een extreem voorbeeld, maar als wij deze instellingen gebruiken:

Zorgt dat voor het volgende effect in relatie tot het content blok hierboven:

Een Marge van 320 voegt dus eigenlijk "witregels" toe waar je geen content in kan plaatsen buiten het element, tussen twee content blokken.

Een Padding van 320 voegt dus eigenlijk "witregels" toe binnen een element en potentieel dus tussen twee elementen binnen hetzelfde content blok.