CSS Odmik

Odmik (ang. Padding) se uporablja za ustvarjanje prostora okoli vsebine elementa znotraj poljubnih definiranih robov. S CSS imamo popoln nadzor nad odmiki. Obstajajo lastnosti za nastavitev odmika za vsako stran elementa. Te so zgoraj, desno, spodaj in levo v tem vrstnem redu. Vse lastnosti odmika imajo lahko naslednje vrednosti:

Vrednost	Opis
% (Odstotek)	Določa odmik v odstotkih širine vsebovanega elementa.
Dolžina	Določa odmik v px, em, rem, vw, vh, pt, cm, mm itd.
Samodejno	Brskalnik sam izračuna primeren odmik.
Začetno	Nastavi odmik na privzeto vrednost.
Podedovano	Določa, da mora biti odmik podedovan od nadrejenega elementa.
Ponastavljeno	Ponastavi vrednost na naravno vrednost lastnosti (če je dedna lastnost, deluje kot inherit, sicer kot initial).

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>CSS Padding Primeri</title>
    <style>
        /* Osnoven okvir za vse elemente */
        .okvir {
            margin: 20px;
            background-color: #f0f0f0;
        }

        /* Tvoji določeni primeri */
        .primer-a {
            color: black !important;
            padding: 100px 122px 100px 122px;
            background-color: #ffebee;
        }

        .primer-b {
            color: black !important;
            padding: 50px 200px;
            background-color: #e3f2fd;
        }

        /* Dodatni primeri */
        .primer-c {
            color: black !important;
            padding: 25px;
            background-color: #f1f8e9;
        }

        .primer-d {
            color: black !important;
            padding-left: 50px;
            padding-right: 50px;
            background-color: #fff3e0;
        }

        .primer-e {
            color: black !important;
            padding: 10%;
            background-color: #f3e5f5;
        }

        /* Oblikovanje besedila */
        p {
            margin: 0;
            font-family: Arial, sans-serif;
        }

        .opis {
            font-size: 14px;
            color: black !important;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="okvir">
        <p class="primer-a">Ta element ima padding 100px zgoraj in spodaj ter 122px levo in desno</p>
        <p class="opis">padding: 100px 122px 100px 122px;</p>
    </div>

    <div class="okvir">
        <p class="primer-b">Ta element ima padding 50px zgoraj in spodaj ter 200px levo in desno</p>
        <p class="opis">padding: 50px 200px;</p>
    </div>

    <div class="okvir">
        <p class="primer-c">Ta element ima enak padding na vseh straneh (25px)</p>
        <p class="opis">padding: 25px;</p>
    </div>

    <div class="okvir">
        <p class="primer-d">Ta element ima padding samo na levi in desni strani (50px)</p>
        <p class="opis">padding-left: 50px; padding-right: 50px;</p>
    </div>

    <div class="okvir">
        <p class="primer-e">Ta element ima padding določen v odstotkih (10%)</p>
        <p class="opis">padding: 10%;</p>
    </div>
</body>
</html>

REZULTAT

Negativne vrednosti niso dovoljene. Če želimo kodo skrajšati, je mogoče podati vse lastnosti odmika v eni lastnosti. Lastnost odmika je skrajšana lastnost za naslednje posamezne lastnosti odmikov:

Skrajšana lastnost	Skrajšana lastnost za nastavitev vseh lastnosti odmika v eni deklaraciji.	Glej primer
Zgornji odmik	Nastavi zgornji odmik elementa.	Glej primer
Desni odmik	Nastavi desni odmik elementa.	Glej primer
Spodnji odmik	Nastavi spodnji odmik elementa.	Glej primer
Levi odmik	Nastavi levi odmik elementa.	Glej primer

Če želimo vpisati vse štiri vrednosti skupaj (zgoraj, desno, spodaj in levo) vpišemo:


p.a {
    border: 1px solid black;
    padding: 100px 122px 100px 122px;
}

Če želimo zgornji in spodnji odmik enake velikosti, kot tudi leva in desna odmika:


p.b {
    border: 1px solid black;
    padding: 50px 200px;
}

Pomeni, da bosta zgornji in spodnji odmik dolžine 50px, levi in desni pa dolžine 200px.