CSS skola
CSS padding

CSS padding 

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p class="foo">Aenean imperdiet iaculis nulla vitae.</p>
<p class="fue">Aenean imperdiet iaculis nulla vitae.</p>

Padding frigör utrymme runt innehållet inuti ett element. Padding får samma bakgrundsfärg som elemetet.

Padding kan skrivas i vanliga måttenheter (px, em, cm..) eller i procent (%).

CSS

p {background:red; padding:20px;}
.foo {background:blue; padding:1em;}
.fue {background:orange; padding:10%;}

Mer om padding

Olika sidor på ett element kan ha olika padding. Det går att ange med egenskaperna ”padding-top”, ”padding-right”, ”padding-bottom”,” padding-left”:

CSS

p {background:red; padding-left:100px;}
.foo {background:blue; padding-left:10px;}
.fue {background:orange; padding-left:0px;}

Samlingsegenskap för padding

Det går att ange alla fyra sidor samtidigt med samlingsegenskapen ”padding”:

CSS

p {background:red; padding:0 0 0 100px;}
.foo {background:blue; padding:10px 0 0 10px;}
.fue {background:orange; padding:0px 100px;}

Värdena anges i tur och ordning för topp, höger, botten och vänster.

Det går även att ange färre egenskaper än fyra.

Antal egenskaper för padding
Antal egenskaper Exempel: Resultat
1 div {padding:10px;} 10px padding på alla fyra sior.
2 div {padding:10px 5px;} 10px padding på ovan- och undersidan,
5px padding på höger- och vänstersidan.
3 div {padding:10px 0 5px;} 10px padding på ovansidan,
0px padding på höger- och vänstersidan,
5px padding på undersidan.
| Mer