Wat is het verschil tussen margins en paddings?

Als je begint met ontwerpen, zul je de woorden “margin” en “padding” vaak horen vallen. Vrij snel zul je begrijpen dat het gaat om de ruimte tussen elementen. In het begin kunnen deze twee woorden verwarrend zijn omdat ze allebei met hetzelfde te maken hebben. Er zijn echter belangrijke verschillen en als je die eenmaal begrijpt, zul je betere ontwerpbeslissingen kunnen nemen.

Als je met Elementor werkt, vind je dit terug onder Geavanceerd in je panel.

Marge

Marge is de ruimte tussen de rand en het volgende element van je ontwerp. Denk aan de ruimte buiten de rand en tussen de rand en de andere elementen. Dit is de hele marge. De marge loopt rond alle vier de zijden van de inhoud en je kunt de marge voor elke zijde instellen en wijzigen.

Padding (opvulling)

Padding is de ruimte binnen het element tussen het element en de rand. Padding gaat rond alle vier de zijden van de inhoud en je kunt de opvulling voor elke zijde instellen en wijzigen.

Een afbeelding van het verschil tussen marge en padding

De eenvoudigste manier om het verschil tussen margin en padding te begrijpen is door middel van de onderstaande afbeelding. Het laat zien hoe elk deel van iets (zoals een paragraaf element) eruit ziet.

Verschil margins en paddings

Door te ‘spelen’ met je margins en border kun je je inhoud of content precies plaatsen tov andere elementen waar je wil.

Tip: probeer ook een negatieve waarden in te geven, zo kun je je element over ander elementen laten schuiven.

 

Voorbeeld met margins en paddings op 0

Voorbeeld met negatieve marge links.

De foto komt nu achter de tekst. Je moet eventueel de z-index van de tekst hoger instellen dan de z-index van de foto om zeker te zijn dat de tekst boven de foto komt.

Ik hoop dat deze blog je een stapje dichter heeft gebracht om je website beter te maken.

Heb je nog vragen? Heb je graag hulp?

Dan kan je me steeds contacteren via https://projectan.be/contact/ of een mailtje sturen aan tania@projectan.be

Wist je dat ik een 1-1 coaching geef om een kickstart te maken met je WordPress website? Kijk hier wat ik je te bieden heb: https://projectan.be/1-1-coaching/

Share on facebook
Share on linkedin
Share on whatsapp
Share on email
Share on print
Verschil margins en paddings
Wil je Pro Tips meteen in je email ontvangen? Schrijf je hier in.