CSS Notranji odmik, Razmiki in Oblikovanje

Notranji odmik (Padding) ustvarja prostor med vsebino elementa in njegovim robom. Za razliko od zunanjega odmika, ki določa razdaljo med elementi, notranji odmik določa, koliko prostora ima vsebina znotraj svojega okvirja. S CSS imamo popoln nadzor nad odmiki in lahko nastavimo vrednosti za vsako stran posebej: zgoraj, desno, spodaj in levo.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Primer notranjega odmika</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    
    <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

Vrednost	Opis
% (Odstotek)	Določa odmik v odstotkih glede na širino nadrejenega elementa (ne vsebovanega!). Na primer: padding: 5%;
Dolžina	Določa odmik v različnih merskih enotah: px (piksli): padding: 20px; em (relativno na velikost pisave): padding: 2em; rem (relativno na velikost pisave korenskega elementa): padding: 2rem; vw (odstotek širine vidnega polja): padding: 5vw; vh (odstotek višine vidnega polja): padding: 5vh;
Samodejno (auto)	Brskalnik samodejno izračuna odmik. Pri padding-u se običajno obravnava kot 0, razen če je specifično podprto v določenih kontekstih.
Initial	Nastavi vrednost na privzeto vrednost po CSS specifikaciji (za padding je to 0).
Inherit	Element podeduje vrednost padding-a od nadrejenega elementa (privzeto padding ni dedna lastnost, lahko pa jo vsilimo s to vrednostjo).
Unset	Ponastavi vrednost – ker padding ni dedna lastnost, deluje enako kot initial (vrednost 0).

Hitri pregled: CSS Padding lastnosti

Spodnja tabela prikazuje vse glavne lastnosti za nadzor notranjega odmika. Uporabite jih za določanje prostora med vsebino in robom elementa. Primeri v stolpcu "Primer" so pripravljeni za neposredno kopiranje v vaš CSS.

Lastnost	Primer	Opis
Osnovne lastnosti
`padding`	`padding: 10px;`	Skrajšana lastnost (shorthand) za nastavitev vseh štirih strani hkrati
`padding-top`	`padding-top: 20px;`	Nastavi zgornji notranji odmik elementa
`padding-right`	`padding-right: 15px;`	Nastavi desni notranji odmik elementa
`padding-bottom`	`padding-bottom: 10px;`	Nastavi spodnji notranji odmik elementa
`padding-left`	`padding-left: 5px;`	Nastavi levi notranji odmik elementa
Skrajšane sintakse
`padding: 10px`	`padding: 10px;`	Vse štiri strani: 10px
`padding: 10px 20px`	`padding: 10px 20px;`	Zgornji/Spodnji: 10px, Desni/Levi: 20px
`padding: 10px 20px 30px`	`padding: 10px 20px 30px;`	Zgornji: 10px, Desni/Levi: 20px, Spodnji: 30px
`padding: 10px 20px 30px 40px`	`padding: 10px 20px 30px 40px;`	Zgornji: 10px, Desni: 20px, Spodnji: 30px, Levi: 40px
Drugo
`box-sizing: border-box`	`box-sizing: border-box;`	Vključi padding in border v skupno širino/višino elementa (priporočeno!)

CSS Notranji odmik, Razmiki in Oblikovanje

Hitri pregled: CSS Padding lastnosti

Vadnica.org

Povezave

Podpora