Odmiki v CSS

Notranji odmiki - padding

Velikost notranjih odmikov elementa določimo z oblikovno lastnostjo padding. Velikost odmikov določimo za vsak rob elementa posamezno, lahko pa tudi za vse štiri strani elementa hkrati. V tem primeru za vrednost navedemo vsaj eno in največ štiri vrednosti:

• če navedemo eno vrednost, velja za vse štiri robove
• če navedemo dve vrednosti, velja prva za zgornji in spodnji, druga pa za levi in desni rob
• če navedemo tri vrednosti, velja prva za zgornji, druga za levi in desni, tretja pa za spodnji rob
• če navedemo štiri vrednosti, velja prva za zgornji, druga za desni, tretja za spodnji in četrta za levi rob

Za vrednost notranjih odmikov navedemo eno izmed vrednosti iz spodnje tabele:

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

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

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

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

Zunanji odmiki - margin

Velikost zunanjih odmikov elementa določimo z oblikovno lastnostjo margin. Velikost odmikov določimo za vsak rob elementa posamezno, lahko pa tudi za vse štiri strani elementa hkrati. V tem primeru za vrednost navedemo vsaj eno in največ štiri vrednosti:

• če navedemo eno vrednost, velja za vse štiri robove
• če navedemo dve vrednosti, velja prva za zgornji in spodnji, druga pa za levi in desni rob
• če navedemo tri vrednosti, velja prva za zgornji, druga za levi in desni, tretja pa za spodnji rob
• če navedemo štiri vrednosti, velja prva za zgornji, druga za desni, tretja za spodnji in četrta za levi rob

Za vrednost zunanjih odmikov navedemo eno izmed vrednosti iz spodnje tabele:

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

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