Vad är skillnaden mellan marginaler och padding?

Tomma ytor är inte din fiende :)

skrivet den 3 januari, 2020, uppdaterat den 14 november, 2022 av Karin H Olsson

Du har säkert stött på bägge dessa ord (padding och marginal) om du gör ändringar på din site och använder till exempel en sidbyggare. Möjligheten finns att du lite slumpmässigt ändrar bägge när du vill lägga lite luft mellan delar av sidan.

Ett exempel på padding och margin

Här har jag skapat två boxar på 100px * 100px. De ligger som du ser dikt intill varandra.

Om jag vill skapa luft mellan dem så behöver jag skapa en marginal. Jag kan lägga den till höger om den blå eller till vänster om den gröna. Resultatet blir samma sak men här har jag valt 10px i högermarginal på den blå boxen.

Text i blå boxen

Text i gröna boxen

Vad händer om jag lägger till text? Som ni ser så blir det inte bra! Texten börjar för långt till vänster och det saknas luft.

Text i blå boxen

Text i gröna boxen

Här har jag lagt till en padding på 10px för att skapa luft i boxen. Det ser genast bättre ut.