CSS svojstva

Margine

 

Margine (rubnice) određuju udaljenost CSS kutije, odnosno elementa, od ostalih elemenata na stranici. Ova svojstva su duljine koje mogu biti izražene u bilo kojoj dopuštenoj mjernoj jedinici. Margine se mogu definirati ili sa sve četiri strane pojedinačno, ili skraćenim svojstvom.

margin-top

Gornja margina – udaljenost od gornjeg elementa.

margin-right

Desna margina – udaljenost od desnog elementa.

margin-bottom

Donja margina – udaljenost od donjeg elementa.

margin-left

Lijeva margina – udaljenost od lijevog elementa.

 

Ukoliko, primjerice, imamo element div, koji želimo odmaknuti od rubova kutije u kojoj se nalazi, možemo to napraviti koristeći margine:

div {
margin-top: 15px;
margin-right: 70px;
margin-bottom: 5px;
margin-left: 40px;

border: 1px solid #000;
background-color: #99CCFF;
}
<div>Lorem ipsum dolor sit amet</div>
Lorem ipsum dolor sit amet
  • Nula se piše bez oznake mjerne jedinice, na primjer: margin-right: 0;

Skraćeni selektor – margin

Četiri pojedinačne margine mogu se zamijeniti skraćenim svojstvom, koje bi se tada, za prethodni slučaj, definiralo na sljedeći način.

div {
margin: 15px 70px 5px 40px;
}
Redoslijed navođenja margina
Redoslijed navođenja margina:
gore, desno, dolje, lijevo.

Ukoliko želimo jednaku marginu za sve strane elementa, možemo pisati:

div {
margin: 5px;
}
CARNet