Jag bloggar numera på http://blog.dileno.com ».

Anpassa avstånden med margin och padding

en CSS-artikel av Martin S., publicerad den 2 maj 2005
Margin och padding är de två egenskaperna man har mest nytta av när man vill ange att en viss marginal ska finnas från ett HTML-element till det omkring, eller om man vill att själva elementet ska hamna lite längre åt höger, vänster, mer uppåt eller neråt i förhållande till det som finns omkring. Krångligt? Inte alls. Margin och padding är enkla att använda. Häng med så får du se.

Margin och padding illustrerat


Med margin talar vi om att vi ska ha ett tomt område på ett visst antal pixlar runt omkring ett element. Med padding talar vi om hur långt från ett elements kant själva innehållet i elementet ska visas. Dessa två selektorer kan bäst beskrivas grafiskt:

margin:

Grafisk beskrivning margin

I bilden är det vita i mitten själva elementet. Det gråa runt omkring är kantutfyllnaden - marginalen.

padding:

Grafisk beskrivning padding

I denna bild är elementet både det gråa och vita. Det vita är dock elementets innehåll, medan det gråa är dess utfyllnad - padding.

Användande av margin och padding


När man vill använda sig av margin och padding kan man sätta ett generellt värde för respektive egenskap. Då kommer avståndet till vänster, höger, avståndet upp och ner att för margin vara densamma runt hela elementet, och för padding vara densamma till elementets kant.

h3 { margin: 10px; }
Med denna regel talar vi om att en h3-rubrik ska ha marginalen 10 pixlar till omkringliggande element. Att ge margin ett värde innebär att elementet som påverkas av regeln (i detta fall h3) får en marginal på 10 pixlar både upp och ner samt till vänster och höger. Detta innebär att rubriken kommer hamna 10 pixlar in i sidan:

Exempel margin

Ger man padding ett värde, exempelvis 10px, så innebär det i sin tur att ett elements innehåll hamnar 10 pixlar från elementets kant.

h3 { padding: 10px; }
ger resultatet

Exempel padding

Som du ser hamnar brödtexten helt plötsligt mycket längre ner. Detta på grund av att paddingen gäller åt alla fyra håll – även neråt. Man kanske bara vill att paddingen ska gälla neråt. Då kan man använda sig av egenskapen padding-bottom:

h3 { padding-bottom: 10px; }
Exempel padding-bottom

padding-bottom är inte den enda egenskapen man kan använda för detta ändamål. Här är en lista på samtliga margin- och padding-egenskaper:

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left
  • padding-top
  • padding-right
  • padding-bottom
  • padding-left

Nu kanske man vill använda sig av olika margin- och/eller paddingegenskaper för varje riktning. Då kan man tänka sig att man ger egenskaperna ovan ett varsitt värde – men det finns ett fiffigare sätt. Margin- och padding-egenskaperna klarar av att ta emot fyra värden, ett för varsin riktning. Pseudokod ser ut så här:

h3 { margin: toppvärde högervärde bottenvärde vänstervärde; }
Man anger alltså värde för alla fyra riktningar men med ett mellanrum mellan varje värde. Låt säga att man vill ha en margin-top på 10px, margin-right på 7px, margin-bottom på 5px och margin-left på 0 pixlar. Då skriver man så här:

h3 { margin: 10px 7px 5px 0; }
Betydligt effektivare än att skriva ut alla margin-egenskaper och ge dem ett värde – och dessutom är det samma regler. Jämför koden ovan med denna:

h3 {
margin-top: 10px;
margin-right: 7px;
margin-bottom: 5px;
margin-left: 0; }

Som du kanske märker skriver jag inte 0px som värde för margin-left. Detta för att 0 tolkas direkt som 0 och inget annat.

Du kan använda padding-egenskapen på samma sätt som margin-egenskapen: det är bara att ange ett värde för varje riktning.

När bör man använda vad?


Låt säga att du bara vill ha ett värde för margin-bottom på 10px och inget värde för de andra margin-egenskaperna. Då kan du skriva så här:

h3 { margin: 0 0 10px 0; }
Min åsikt är att då kan man lika gärna använda sig av margin-bottom-egenskapen i stället för margin-egenskapen:

h3 { margin-bottom: 10px; }
Har man däremot fler än ett värde som man vill ge ett element så kan man använda sig av margin/padding-egenskapen och skriva fyra värden för respektive riktning. Dock bör man ta i beaktande att margin och padding i vissa fall (till exempel i listor) tolkas olika av olika webbläsare - vilket avhjälps genom att ange fyra värden trots att man egentligen bara behöver ange ett.

h3 { margin: 8px 0 8px 0; }
h3-regeln ovan talar om att vi ska ha en marginal på 8 pixlar till element ovanför alla h3-rubriker, och 8 pixlars marginal till element nedanför alla h3-rubriker.

Att använda förkortningar


Vad gäller margin och padding så kan man ange ett till fyra värden för respektive. Jag har visat hur man använder ett värde och fyra värden, men inte hur man använder sig av två eller tre värden.

Tabell: värden för margin och padding
Egenskap och värdenGäller för dessa sidor
egenskap: värde1;alla fyra sidor, upp, höger, ner och vänster
egenskap: värde1 värde2;värde1 upp och ner, värde2 höger och vänster
egenskap: värde1 värde2 värde3;värde1 upp, värde2 höger och vänster, värde3 ner
egenskap: värde1 värde2 värde3 värde4;respektive värde upp, höger, ner, vänster (i den ordningen)

Vill du t.ex. att marginalen för ett element ska vara 15 pixlar uppåt och neråt, samt 10 pixlar åt vänster och höger, kan du skriva så här:

h3 { margin: 15px 10px; }
Lite smidigare och mer överskådligt än att ange fyra värden:

h3 { margin: 15px 10px 15px 10px; }
Som ett sista exempel: vill du att marginalen ska vara 15 pixlar uppåt, 5 pixlar åt höger och vänster, samt 10 pixlar neråt, kan du skriva så här:

h3 { margin: 15px 5px 10px; }
Att möjligheterna till att använda färre värden än fyra finns är bra inte bara för att koden blir mer överskådlig, utan också för att man kan reducera sina stilmallar i filstorlek om man använder sig av förkortningar på rätt sätt.

Sammanfattning


Margin och padding-egenskaperna är otroligt nyttiga när man vill skapa utrymme för vissa html-element. Man kan direkt styra var på en sida ett visst html-element ska hamna.
Kom dock ihåg att alltid sträva efter att skriva så lite kod som möjligt – men som utför det du behöver. Att använda sig av alla margin-egenskaperna för att ge dem ett varsitt värde, i stället för att bara använda margin-egenskapen själv och ge den fyra värden för alla riktningar, är dumt. Lika dumt som att ange fler värden än du behöver. I slutändan genererar kod som tar mindre plats kortare laddningstider, vilket både du och dina besökare har nytta av.