CSS Padding
Za šta se koristi CSS padding?
CSS Padding se koristi za određivanje praznog prostora unutar HTML elementa između sadržaja i granice elementa.
Da bi odredili padding oko nekog HTML elemnta koristimo parametar padding.
Primjer:
Ovaj paragraph ima padding 60px, sa svih strana.
p    { padding: 60px; }
Vrijednosti parametara
U primjeru je vrijednost padding postavljena u pixelima (px), ali pored pixela postoje i drugi oblici.
Svi praametri margine imaju sljedeće vrijednosti:
dužina - određuje se tačno određena dužina u px, cm, pt.
postotak - određuje se veličina margine u postotcima (%).
Pojedinačne strane
Kao i kod margina, CSS omogućuje postavljanje padding za bilo koju stranu pojedinačno ( gore, dolje, lijevo, desno ).
Parametri za pojedinačno određivanje padding-a su:
padding-top - određuje padding sa gornje strane.
padding-right - određuje padding sa desne strane.
padding-bottom - određuje padding sa donje strane.
padding-left - određuje padding sa lijeve strane.
Primjer:
Ovaj paragraph ima padding 50px, sa gornje strane.
Ovaj paragraph ima padding 100px, sa desne strane.
Ovaj paragraph ima padding 100px, sa lijeve strane.
Ovaj paragraph ima padding 50px, sa donje strane.
p    { padding-top: 50px; }
p    { padding-right: 100px; }
p    { padding-left: 100px; }
p    { padding-bottom: 50px; }
Skraćeno pisanje padding-a
Pisanje pojedinačnih padding-a za svaki HTML element zauzima dosta prostora i vremena, a kod bude težak za čitanje.
CSS omogućuje da odjednom napišemo sve različite parametre padding-a, te na taj način olakšamo sebi posao.
To se postiže tako da se svi parametri padding stave pod jedan zajednički sa više vrijednosti.
Parametar sa četiri vrijednosti:
Ako parametar ima četiri vrijednosti, svaka od njih određuje po jednu stranu (gore, dolje, lijevo, desno).
margin: 10px 50px 20px 60px;
gornji padding = 30px
desni padding = 50px
donji padding = 20px
lijevi padding = 100px
Ovaj paragraph ima gornji padding 30px, desni padding 50px, donji padding 20px i lijevi padding 100px.
p    { padding: 30px 50px 20px 100px ; }
Parametar sa tri vrijednosti:
Ako parametar ima tri vrijednosti, prva predstavlja gornju marginu, druga predstavlja lijevu i desnu, a treća donju marginu.
padding: 10px 100px 60px;
gornji padding = 50px
lijevi i desna padding = 100px
donji padding = 20px
Ovaj paragraph ima gornji padding 50px, lijevi i desni padding 100px, i donju padding 20px.
p    { padding: 50px 100px 20px ; }
Parametar sa dvije vrijednosti:
Ako parametar ima dvije vrijednosti, prva predstavlja gornju i donju marginu, druga predstavlja lijevu i desnu.
padding: 30px 70px;
gornja i donji padding = 30px
lijeva i desni padding = 70px
Ovaj paragraph ima gornju i donji padding 30px, lijevi i desni padding 70px.
p    { margin: 30px 70px ; }
Parametar sa jednom vrijednosti:
Ako parametar ima jednu vrijednost, ona predstavlja istu marginu za sve četiri strane.
padding: 60px;
padding za sve četiri strane = 60px
Ovaj paragraph ima sva četiri padding-a od 60px.
p    { padding: 60px ; }