Marginaler och padding

I denna lektionen får du lära dig hur egenskaperna margin och padding fungerar.

Marginaler och padding är det utrymmet som finns precis utanför och precis innanför elementen. Det kanske låter krångligt, men är egentligen ganska enkelt. Kolla på divarna nedanför så ser du hur elementen påverkas.

Det här är en vanlig div som är 200 pixlar bred. Marginalerna är 0 och paddingen är 0.
Det här är nästan en vanlig div som är 200 pixlar bred. Marginalerna är 0 och paddingen är 20 pixlar, vilket gör att elementets innehåll (texten) alltid är minst 20 pixlar ifrån kanten (så egentligen är jag 200 + 20 + 20 = 240 pixlar bred).
Det här är nästan en vanlig div som är 200 pixlar bred. Paddingen är 0 och marginalerna är 20 pixlar, vilket gör att elementets kanter är 20 pixlar ifrån omliggande element.

Padding

Egenskapen padding styr alltså det utrymme som finns mellan kanterna på ett element och dess innehåll.

CSS - Cascading Style Sheets
#div{ background-color: red; padding: 30px; }
HTML - HyperText Markup Language
<div id="div">Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten.</div>
Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten. Denna texten är alltid minst 30 pixlar ifrån kanten.

Man kan även specificera en viss kant med egenskaperna padding-top, padding-right, padding-bottom och padding-left.

CSS - Cascading Style Sheets
#div{ background-color: red; padding-top: 10px; /* Paddingen på översidan */ padding-right: 200px; /* Paddingen på högersidan */ padding-bottom: 50px; /* Paddingen på undersidan */ padding-left: 40px; /* Paddingen på vänstersidan */ }
HTML - HyperText Markup Language
<div id="div">Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor.</div>
Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor. Denna texten har olika padding-värden på alla sidor.

Istället för att använda alla fyra egenskaperna padding-top, padding-right, padding-bottom och padding-left för att ange olika värden på olika sidor så kan man ange alla direkt i egenskapen padding. Det fungerar på följande sätt:

CSS - Cascading Style Sheets
#div{ background-color: red; padding: 50px 10px 30px 100px; /* Först anger vi översidan, sedan högersidan, därefter undersidan och sist vänstersidan (minnesregel: det går klockvis med början på översidan) */ /* Paddingen ovan är densamma som denna: padding-top: 50px; padding-right: 10px; padding-bottom: 30px; padding-left: 100px; */ }
HTML - HyperText Markup Language
<div id="div">Denna diven har olika padding på alla sidor. Denna diven har olika padding på alla sidor. Denna diven har olika padding på alla sidor. Denna diven har olika padding på alla sidor. Denna diven har olika padding på alla sidor. Denna diven har olika padding på alla sidor. Denna diven har olika padding på alla sidor. Denna diven har olika padding på alla sidor.</div>
Denna diven har olika padding på alla sidor. Denna diven har olika padding på alla sidor. Denna diven har olika padding på alla sidor. Denna diven har olika padding på alla sidor. Denna diven har olika padding på alla sidor. Denna diven har olika padding på alla sidor. Denna diven har olika padding på alla sidor. Denna diven har olika padding på alla sidor.

Om man vill ha samma padding på översidan och undersidan och högersidan och vänstersidan kan man skriva det på följande sätt:

CSS - Cascading Style Sheets
#div{ background-color: red; padding: 50px 100px; /* Över- och undersidan får 50 pixlar, höger- och vänstersidan får 100 pixlar */ }
HTML - HyperText Markup Language
<div id="div">Denna texten har 50 pixlar padding på ovansidan och undersidan, och 100 pixlar padding på högersidan och vänstersidan. Denna texten har 50 pixlar padding på ovansidan och undersidan, och 100 pixlar padding på högersidan och vänstersidan. Denna texten har 50 pixlar padding på ovansidan och undersidan, och 100 pixlar padding på högersidan och vänstersidan. Denna texten har 50 pixlar padding på ovansidan och undersidan, och 100 pixlar padding på högersidan och vänstersidan.</div>
Denna texten har 50 pixlar padding på ovansidan och undersidan, och 100 pixlar padding på högersidan och vänstersidan. Denna texten har 50 pixlar padding på ovansidan och undersidan, och 100 pixlar padding på högersidan och vänstersidan. Denna texten har 50 pixlar padding på ovansidan och undersidan, och 100 pixlar padding på högersidan och vänstersidan. Denna texten har 50 pixlar padding på ovansidan och undersidan, och 100 pixlar padding på högersidan och vänstersidan.

Marginaler

Egenskapen margin styr utrymmet precis utanför elementet, och man anger det på precis samma sätt som padding, fast man använder egenskapen margin.

CSS - Cascading Style Sheets
#omgivarDiv{ border: 3px solid red; } #div{ background-color: blue; margin: 30px; }
HTML - HyperText Markup Language
<div id="omgivarDiv"> <div id="div">Denna diven är alltid 30 pixlar ifrån kanten.</div> </div>
Denna diven är alltid 30 pixlar ifrån kanten.

Man kan även använda margin-top, margin-right, margin-bottom och margin-left för att ange olika marginaler på olika kanter.

CSS - Cascading Style Sheets
#omgivarDiv{ border: 3px solid red; } #div{ background-color: blue; margin-top: 10px; /* Marginalerna på ovansidan */ margin-right: 20px; /* Marginalerna på högersidan */ margin-bottom: 30px; /* Marginalerna på undersidan */ margin-left: 40px; /* Marginalerna på vänstersidan */ }
HTML - HyperText Markup Language
<div id="omgivarDiv"> <div id="div">Denna diven har olika marginaler på alla sidor.</div> </div>
Denna diven har olika marginaler på alla sidor.

Man kan ange alla fyra egenskaperna margin-top, margin-right, margin-bottom och margin-left direkt i egenskapen margin på följande sätt:

CSS - Cascading Style Sheets
#omgivarDiv{ border: 3px solid red; } #div{ background-color: blue; margin: 50px 10px 30px 100px; /* Först anger vi översidan, sedan högersidan, därefter undersidan och sist vänstersidan (minnesregel: det går klockvis med början på översidan) */ /* Marginalerna ovan är densamma som denna: margin-top: 50px; margin-right: 10px; margin-bottom: 30px; margin-left: 100px; */ }
HTML - HyperText Markup Language
<div id="omgivarDiv"> <div id="div">Denna diven har olika marginaler på alla sidor.</div> </div>
Denna diven har olika marginaler på alla sidor.

Om man vill ha samma marginaler på översidan och undersidan och högersidan och vänstersidan kan man skriva det på följande sätt:

CSS - Cascading Style Sheets
#omgivarDiv{ border: 3px solid red; } #div{ background-color: blue; margin: 50px 100px; /* Över- och undersidan får 50 pixlar, höger- och vänstersidan får 100 pixlar */ }
HTML - HyperText Markup Language
<div id="omgivarDiv"> <div id="div">Denna diven har 50 pixlar i marginaler på ovansidan och undersidan, och 100 pixlar i marginaler på högersidan och vänstersidan.</div> </div>
Denna diven har 50 pixlar i marginaler på ovansidan och undersidan, och 100 pixlar i marginaler på högersidan och vänstersidan.

Ett värde som margin kan anta, men som padding däremot inte kan anta, är värdet auto. Du kan använda det värdet för att centrera elementet genom att sätta det värdet på sidorna.

CSS - Cascading Style Sheets
#omgivarDiv{ border: 3px solid red; } #div{ background-color: blue; width: 200px; margin: 50px auto; /* Sätt marginalerna på sidorna till auto */ }
HTML - HyperText Markup Language
<div id="omgivarDiv"> <div id="div">Denna diven är centrerad.</div> </div>
Denna diven är centrerad.

Detta var sista lektionen i detta språket.