Du har säkert stött på bägge dessa ord 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.


Sammanfattning

Marginaler används mellan boxar/delar av webbsidan

Padding används inuti boxar/delar av webbsidan.

Karin H Olsson

Jag har en bakgrund som konstruktör inom realtidssystem, de system som finns inbyggda i bilar, flygplan mm. Sedan tio år är jag företagare. Utbildad systemvetare och beteendevetare och mitt intresseområde finns där människor och datorer möts. En dag förstår vi varandra ;)

Lämna ett svar