CSS Margin
Za šta se koriste CSS margine?
CSS margine se koriste za određivanje praznog prostora oko HTML elemenata.
Da bi odredili margine oko nekog HTML elemnta koristimo parametar margin.
Primjer:
Ovaj paragraph ima marginu 60px, sa svih strana.
p    { margin: 60px; }
Vrijednosti parametara
U primjeru je vrijednost margine 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 (%).
auto - browser automatski određuje dužinu margine.
inhert - margina se određuje (nasljeđuje) na osnovu "roditeljskog" elementa.
Pojedinačne strane
CSS omogućuje postavljanje margine za bilo koju stranu pojedinačno ( gore, dolje, lijevo, desno ).
Parametri za pojedinačno određivanje margina su:
margin-top - određuje marginu sa gornje strane.
margin-right - određuje marginu sa desne strane.
margin-bottom - određuje marginu sa donje strane.
margin-left - određuje marginu sa lijeve strane.
Primjer:
Ovaj paragraph ima marginu 50px, sa gornje strane.
Ovaj paragraph ima marginu 100px, sa desne strane.
Ovaj paragraph ima marginu 100px, sa lijeve strane.
Ovaj paragraph ima marginu 50px, sa donje strane.
p    { margin-top: 50px; }
p    { margin-right: 100px; }
p    { margin-left: 100px; }
p    { margin-bottom: 50px; }
Skraćeno pisanje margina
Pisanje pojedinačnih margina 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 margina, te na taj način olakšamo sebi posao.
To se postiže tako da se svi parametri margine 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;
gornja margina = 30px
desna margina = 50px
donja margina = 20px
lijeva margina = 100px
Ovaj paragraph ima gornju marginu 30px, desnu marginu 50px, donju marginu 20px i lijevu marginu 100px.
p    { margin: 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.
margin: 50px 100px 20px;
gornja margina = 50px
lijeva i desna margina = 100px
donja margina = 20px
Ovaj paragraph ima gornju marginu 50px, lijevu i desnu marginu 100px, i donju marginu 20px.
p    { margin: 50px 100px 20px ; }
Parametar sa dvije vrijednosti:
Ako parametar ima dvije vrijednosti, prva predstavlja gornju i donju marginu, druga predstavlja lijevu i desnu.
margin: 30px 70px;
gornja i donja margina = 30px
lijeva i desna margina = 70px
Ovaj paragraph ima gornju i donju marginu 30px, lijevu i desnu marginu 70px.
p    { margin: 30px 70px ; }
Parametar sa jednom vrijednosti:
Ako parametar ima jednu vrijednosti, ona predstavlja istu marginu za sve četiri strane.
margin: 70px;
margina za sve četiri strane = 70px
Ovaj paragraph ima sve četiri strane jednake margine od 60px.
p    { margin: 60px ; }