Smart genväg för att hålla ordning på margin och padding

Margin och paddding brukar nog vara några av de första sakerna som man börjar fixa och trixa med i kodmallen. Med margin och padding kan man flytta olika objekt uppåt, nedåt, åt höger eller åt vänster. Ibland kan det vara lite svårt att komma vad som är var och vilken siffra som vad. Men det finns en liten genväg om man har svårt för siffrorna!

För närmare förklaring om vad margin och padding egentligen är,
läs gärna detta inlägg!

Vanligtvis skrivs margin och padding så här:

padding: 5px, 3px, 7px, 1px;
margin: -10px, 8px, -75px, 15px;

Varje siffra styr antingen uppåt, nedåt, höger, vänster, enligt följande:
upp, höger, ner, vänster.
Trots att jag egentligen vet detta, så blandar jag alltid ihop siffrorna!
Så istället skriver jag margin och padding t ex så här:

padding-top: 5px;
padding-left: 10px;
padding-right: 2px;
padding-bottom: 5px;

margin-top: 5px;
margin-left: 10px;
margin-right: 2px;
margin-bottom: 5px;

På så vis kan man enkelt se vilken siffra som styr vad!