Odmiki v CSS

V CSS ločimo notranje in zunanje odmike. Notranji odmik določa prostor med vsebino elementa in njegovim robom, zunanji odmik pa prostor zunaj roba elementa. Obe vrsti odmikov sta zelo pomembni za pregledno in uravnoteženo postavitev strani.

Pomni: Lastnost padding ustvarja prostor znotraj elementa, lastnost margin pa zunaj elementa.

Osnovna pravila

Notranji odmik (padding) določa prostor med vsebino elementa in njegovim robom.
Zunanji odmik (margin) določa prostor zunaj roba elementa.
Pri obeh lastnostih lahko določimo eno, dve, tri ali štiri vrednosti.
Pri štirih vrednostih velja vrstni red: zgoraj, desno, spodaj, levo.
Za notranje odmike negativne vrednosti niso dovoljene, pri zunanjih odmikih pa so mogoče.

Pozor: Če zamenjamo padding in margin, se postavitev elementa hitro spremeni drugače, kot pričakujemo. Zato je pomembno, da vedno najprej razmislimo, ali želimo prostor znotraj ali zunaj elementa.

Notranji odmiki – `padding`

Velikost notranjih odmikov elementa določimo z lastnostjo padding. Velikost odmikov lahko določimo za vsako stran posebej ali pa za vse štiri strani hkrati z bližnjico.

Če pri bližnjici padding navedemo več vrednosti, veljajo naslednja pravila:

če navedemo eno vrednost, velja za vse štiri strani,
če navedemo dve vrednosti, velja prva za zgornjo in spodnjo, druga pa za levo in desno stran,
če navedemo tri vrednosti, velja prva za zgornjo, druga za levo in desno, tretja pa za spodnjo stran,
če navedemo štiri vrednosti, veljajo po vrstnem redu: zgoraj, desno, spodaj, levo.

Vrednost	Pomen
`padding-left`	levi notranji odmik
`padding-right`	desni notranji odmik
`padding-top`	zgornji notranji odmik
`padding-bottom`	spodnji notranji odmik
`padding`	bližnjica za notranje odmike

Za vrednost notranjih odmikov lahko uporabimo naslednje vrste vrednosti:

Vrednost	Pomen
`dolžina`	notranji odmik, na primer v `px`, `em` ali `rem`
`%`	relativen notranji odmik v odstotkih
`inherit`	vrednost podeduje od nadrejenega elementa

Za padding vrednost auto ni veljavna. Pri notranjih odmikih uporabljamo dolžine ali odstotke, negativne vrednosti pa niso dovoljene.

Pomni: Notranji odmik poveča prostor med vsebino in robom elementa, zato vpliva na dejanski videz in navidezno velikost elementa.

Zgledi notranjih odmikov

Primer enakih notranjih odmikov na vseh straneh:

<p class="odmik">Ta odstavek ima notranji odmik: <em><strong>padding: 20px</strong></em></p>

.odmik { 
   padding: 20px;
   background-color: #F9D485;
}

Ta odstavek ima notranji odmik: padding: 20px

Primer različnih notranjih odmikov za posamezne strani:

<p class="odmik-razlicen">Ta odstavek ima notranje odmike: <br />
<em><strong>
padding-left: 40px;<br />
padding-right: 0;<br />
padding-top: 50px;<br />
padding-bottom: 15px;
</strong></em></p>

.odmik-razlicen { 
   padding-left: 40px;
   padding-right: 0;
   padding-top: 50px;
   padding-bottom: 15px;
   background-color: #F9D485;
}

Ta odstavek ima notranje odmike:
padding-left: 40px;
padding-right: 0;
padding-top: 50px;
padding-bottom: 15px;

Primer s sodobno logično lastnostjo:

.odmik-logicen {
   padding-inline: 2rem;
   padding-block: 1rem;
   background-color: #F9D485;
}

Zunanji odmiki – `margin`

Velikost zunanjih odmikov elementa določimo z lastnostjo margin. Tudi tu lahko vrednosti določimo za vsako stran posebej ali pa za vse štiri strani hkrati.

Pri bližnjici margin veljajo enaka pravila za eno, dve, tri ali štiri vrednosti kot pri padding.

če navedemo eno vrednost, velja za vse štiri strani,
če navedemo dve vrednosti, velja prva za zgornjo in spodnjo, druga pa za levo in desno stran,
če navedemo tri vrednosti, velja prva za zgornjo, druga za levo in desno, tretja pa za spodnjo stran,
če navedemo štiri vrednosti, veljajo po vrstnem redu: zgoraj, desno, spodaj, levo.

Vrednost	Pomen
`margin-left`	levi zunanji odmik
`margin-right`	desni zunanji odmik
`margin-top`	zgornji zunanji odmik
`margin-bottom`	spodnji zunanji odmik
`margin`	bližnjica za zunanje odmike

Za vrednost zunanjih odmikov lahko uporabimo naslednje vrste vrednosti:

Vrednost	Pomen
`auto`	brskalnik samodejno izračuna zunanji odmik
`dolžina`	zunanji odmik, na primer v `px`, `em` ali `rem`
`%`	relativen zunanji odmik v odstotkih
`inherit`	vrednost podeduje od nadrejenega elementa

Za razliko od padding imajo zunanji odmiki lahko tudi negativne vrednosti. Pogosto se uporablja tudi margin: 0 auto; za vodoravno poravnavo blokovnega elementa na sredino, kadar ima element določeno širino.

Pozor: Vrednost auto pri lastnosti margin ne pomeni kar samodejnega odmika v vseh smereh. Pri vodoravni poravnavi na sredino je najpogostejši zapis margin: 0 auto;, pri čemer mora imeti element določeno širino.

Zgledi zunanjih odmikov

Primer različnih zunanjih odmikov:

<p class="odmik-zunanji">Ta odstavek ima zunanje odmike: 
<em><strong>margin: 50px 15px 20px 10px</strong></em></p>

.odmik-zunanji { 
   margin: 50px 15px 20px 10px;
   background-color: #F9D485;
}

Ta odstavek ima zunanje odmike: margin: 50px 15px 20px 10px

Primer vodoravnega centriranja elementa z margin: 0 auto:

.sredina {
   width: 60%;
   margin: 0 auto;
   background-color: #F9D485;
}

Ta element je vodoravno poravnan na sredino z lastnostjo margin: 0 auto.

Primer s sodobno logično lastnostjo:

.zunanji-logicen {
   margin-inline: auto;
   margin-block: 1rem;
   width: 70%;
}

Pri navpičnih zunanjih odmikih blokovnih elementov lahko pride do združevanja odmikov (margin collapsing). To pomeni, da se dva sosednja navpična zunanja odmika v določenih primerih ne seštejeta, ampak se uporabi le večji odmik. To ne velja v vsebnikih flex ali grid.

Sodobni CSS poleg fizičnih lastnosti, kot so padding-left in margin-top, podpira tudi logične lastnosti, kot so padding-inline, padding-block, margin-inline in margin-block. Te so posebej uporabne pri različnih smereh pisanja in večjezičnih postavitvah.

Priporočila

Za prostor znotraj elementa uporabi padding, za prostor med elementi pa margin.
Pri bližnjicah padding in margin pazi na pravilen vrstni red štirih vrednosti.
Za vodoravno poravnavo blokovnega elementa na sredino uporabi margin: 0 auto; le takrat, ko ima element določeno širino.
V večjezičnih ali sodobnejših postavitvah razmisli tudi o logičnih lastnostih odmikov.

Pogoste napake

Zamenjava notranjih in zunanjih odmikov.
Uporaba negativnih vrednosti pri lastnosti padding.
Pričakovanje, da bo margin: 0 auto; deloval tudi brez določene širine elementa.
Napačno razumevanje vrstnega reda štirih vrednosti pri bližnjicah.

Nazaj

Naprej