NEDSCHOOLDEV

view_headline menu
yt yt yt

CSS

CSS CSS Uvod CSS Upotreba CSS Boje CSS Pozadine CSS Borders CSS Margine CSS Padding CSS Height/Width CSS Float CSS Tekst CSS Font CSS Poravnanje CSS Linkovi CSS Liste CSS Tabele CSS Ikone








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.

play_arrow

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.

play_arrow

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.

play_arrow

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.

play_arrow

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.

play_arrow

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.

play_arrow

p    { margin: 60px ; }




<< >>



© Copyright 2018. nedschool.com