Padding och margin - vad är det?

Något man ofta stöter på i bloggmallen är orden padding och margin. Vad betyder de egentligen?

Enkelt förklarat är padding det utrymme som finns mellan ditt objekt (här en bild och en exempeltext) och kanten på wrappern som den ligger på. Paddingen talar alltså om hur mycket luft vi vill ha inne i vår wrapper.

Margin är det utrymme som finns mellan den här wrappern och nästa. Större margin ger kolumner som ligger längre isär, mindre margin för dem närmre varandra.

Så, hur gör vi då för att flytta på saker?
För att kunna ändra på rätt siffra behöver vi veta vilken siffra som är vilken. När man skriver ut margin eller padding börjar man alltid räkna uppifrån och går sedan medsols, som en klocka. Se exemplet nedan!


Genom att öka respektive minska padding och margin kan vi flytta objekt både upp och ner, åt höger och åt vänster.

Ett litet tips avslutningsvis.
Man kan faktiskt använda ett minustecken framför en siffra och det gör man när man vill flytta ett objekt utanför sin wrapper eller om man vill flytta något som har en placering som är benämnd auto eller center. Det är dock lite överkurs och kan kräva en del trixande innan det blir rätt, men om inget annat fungerar kan det vara värt att prova.