Lastnost margin določa zunanji odmik elementa – prostor med elementom in njegovimi
sosedi. Z margin-om ustvarjamo razdaljo med elementi in nadziramo njihovo postavitev. Za razliko od padding
(notranji odmik), ki ustvarja prostor znotraj elementa, margin ustvarja prostor zunaj njega.
Vrednosti lahko določimo za vse strani hkrati ali za vsako stran posebej.
| Vrednost | Opis |
|---|---|
| % (Odstotek) | Določa zunanji odmik v odstotkih glede na širino nadrejenega elementa. Na primer: margin: 5%; |
| Samodejno | Brskalnik samodejno izračuna odmik. Pogosto se uporablja za horizontalno centriranje elementov z določeno širino (margin: 0 auto;). |
| Dolžina | Določa odmik v različnih merskih enotah:
|
| initial | Nastavi vrednost na privzeto vrednost po CSS specifikaciji (za margin je to 0). |
| inherit | Element podeduje vrednost margin od nadrejenega elementa (privzeto margin ni dedna, lahko pa jo vsilimo s to vrednostjo). |
| Negativne vrednosti | Dovoljene so tudi negativne vrednosti (npr. margin: -20px), ki element premaknejo v nasprotno smer in lahko povzročijo prekrivanje elementov. |
| unset | Ponastavi vrednost – ker margin ni dedna lastnost, deluje enako kot initial (vrednost 0). |
Spodnja tabela prikazuje vse glavne lastnosti za nadzor zunanjega odmika. Uporabite jih za določanje razdalje med elementi, centriranje blokov ali ustvarjanje negativnih odmikov. Primeri v stolpcu "Primer" so pripravljeni za neposredno kopiranje v vaš CSS.
| Lastnost | Primer | Opis |
|---|---|---|
| Osnovne lastnosti | ||
margin | margin: 10px; |
Skrajšana lastnost (shorthand) za nastavitev vseh štirih strani hkrati |
margin-top | margin-top: 20px; |
Nastavi zgornji odmik elementa |
margin-right | margin-right: 15px; |
Nastavi desni odmik elementa |
margin-bottom | margin-bottom: 10px; |
Nastavi spodnji odmik elementa |
margin-left | margin-left: 5px; |
Nastavi levi odmik elementa |
| Skrajšane sintakse | ||
margin: 10px | margin: 10px; |
Vse štiri strani: 10px |
margin: 10px 20px | margin: 10px 20px; |
Zgornji/Spodnji: 10px, Desni/Levi: 20px |
margin: 10px 20px 30px | margin: 10px 20px 30px; |
Zgornji: 10px, Desni/Levi: 20px, Spodnji: 30px |
margin: 10px 20px 30px 40px | margin: 10px 20px 30px 40px; |
Zgornji: 10px, Desni: 20px, Spodnji: 30px, Levi: 40px |
| Negativni margin-i | ||
margin: -10px | margin-top: -10px; |
Premakne element proti sosednjim elementom (prekrivanje) |
| Avtomatski odmiki (Centering) | ||
margin: 0 auto | margin: 0 auto; |
Sredinsko poravna blok element (če ima določeno širino) |
