CSS Prikazovalniki

Lastnost display je ena najpomembnejših CSS lastnosti za nadzor postavitve elementov na spletni strani. Uporablja se za določanje, kako se element prikaže v dokumentnem toku. Vsak HTML element ima privzeto vrednost lastnosti display, odvisno od vrste elementa. Večina elementov ima privzeto vrednost block ali inline.

Lastnost display omogoča spreminjanje privzetega obnašanja HTML elementov. block element se VEDNO začne v novi vrstici in zavzame celotno razpoložljivo širino. Element inline se NE začne v novi vrstici in zavzame le toliko širine, kolikor je potrebno.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>CSS Prikazovalniki - Praktični primer</title>
    <style>
        /* Osnovni slogi */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            padding: 20px;
        }
        
        body div, body p {
            color: #333333;
            background-color: #fe5849;
            padding: 5px;
        }

        /* Blokovni elementi */
        .blokovni-element {
            display: block;
            background-color: #e0f7fa;
            padding: 15px;
            margin-bottom: 10px;
            border: 2px solid #00bcd4;
        }

        /* Vrstični elementi */
        .vrsticni-element {
            display: inline;
            background-color: #fff3e0;
            color: #333333;
            padding: 5px;
            margin: 0 5px;
            border: 2px solid #084a8f;
        }

        /* Vrstično-blokovni elementi */
        .vrsticno-blokovni-element {
            display: inline-block;
            background-color: #f3e5f5;
            padding: 15px;
            margin: 5px;
            border: 2px solid #9c27b0;
            width: 150px;
            height: 100px;
        }

        /* Prilagodljiv vsebnik */
        .flex-vsebnik {
            display: flex;
            background-color: #e8f5e9;
            padding: 15px;
            margin: 10px 0;
            border: 2px solid #4caf50;
            gap: 10px;
        }

        .flex-element {
            background-color: #c8e6c9;
            padding: 15px;
            border: 1px solid #2e7d32;
            flex: 1;
        }

        /* Mrežni vsebnik */
        .mrezni-vsebnik {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 10px;
            background-color: #fff8e1;
            padding: 15px;
            margin: 10px 0;
            border: 2px solid #ffc107;
        }

        .mrezni-element {
            background-color: #ffecb3;
            padding: 15px;
            border: 1px solid #ffa000;
            text-align: center;
        }

        /* Skrit element */
        .skrito {
            display: none;
        }
    </style>
</head>
<body>
    <h1>Prikaz CSS Prikazovalnikov</h1>

    <h2>1. Blokovni elementi (display: block)</h2>
    <div class="blokovni-element">Ta element je blokovni in zavzame celotno širino</div>
    <div class="blokovni-element">Še en blokovni element, vedno se začne v novi vrstici</div>

    <h2>2. Vrstični elementi (display: inline)</h2>
    <p>Tukaj je <span class="vrsticni-element">prvi vrstični element</span> in <span class="vrsticni-element">
      drugi vrstični element</span> v isti vrstici.
    </p>

    <h2>3. Vrstično-blokovni elementi (display: inline-block)</h2>
    <div class="vrsticno-blokovni-element">Vrstično-blokovni #1</div>
    <div class="vrsticno-blokovni-element">Vrstično-blokovni #2</div>
    <div class="vrsticno-blokovni-element">Vrstično-blokovni #3</div>

    <h2>4. Prilagodljiv vsebnik (display: flex)</h2>
    <div class="flex-vsebnik">
        <div class="flex-element">Prilagodljiv element 1</div>
        <div class="flex-element">Prilagodljiv element 2</div>
        <div class="flex-element">Prilagodljiv element 3</div>
    </div>

    <h2>5. Mrežni vsebnik (display: grid)</h2>
    <div class="mrezni-vsebnik">
        <div class="mrezni-element">Mreža 1</div>
        <div class="mrezni-element">Mreža 2</div>
        <div class="mrezni-element">Mreža 3</div>
        <div class="mrezni-element">Mreža 4</div>
        <div class="mrezni-element">Mreža 5</div>
        <div class="mrezni-element">Mreža 6</div>
    </div>

    <h2>6. Skrit element (display: none)</h2>
    <div class="blokovni-element">Ta element je viden</div>
    <div class="blokovni-element skrito">Ta element je skrit z display: none</div>
</body>
</html>

REZULTAT

CSS lastnost display ima številne možne vrednosti. Poglejmo si jih:

Vrednost	Opis
Blokovni elementi
`display: block`	Blok element – začne v novi vrstici, zavzame celotno širino
`display: contents`	Element ne ustvari škatle; otroci so "dvignjeni" na njegovo mesto
`display: flex`	Blok flex vsebnik
`display: grid`	Blok grid vsebnik
Vrstični elementi
`display: inline`	Vrstični element – ne prelomi vrstice, veljajo samo vodoravne dimenzije
`display: inline-block`	Vrstična škatla s podporo za širino/višino in robove
`display: inline-flex`	Vrstični flex vsebnik
`display: inline-grid`	Vrstični grid vsebnik
`display: inline-table`	Tabela na ravni vrstice
Tabelarni elementi
`display: table`	Obnaša se kot tabela (anonimne škatle za vrstice/celice)
`display: table-caption`	Obnaša se kot element <caption> v tabeli
`display: table-cell`	Obnaša se kot celica tabele (<td>)
`display: table-column`	Obnaša se kot stolpec tabele (<col>)
`display: table-column-group`	Obnaša se kot skupina stolpcev (<colgroup>)
`display: table-footer-group`	Obnaša se kot noga tabele (<tfoot>)
`display: table-header-group`	Obnaša se kot glava tabele (<thead>)
`display: table-row`	Obnaša se kot vrstica tabele (<tr>)
`display: table-row-group`	Obnaša se kot telo tabele (<tbody>)
Drugo
`display: inherit`	Podeduje vrednost od nadrejenega elementa
`display: initial`	Ponastavi na privzeto vrednost lastnosti
`display: list-item`	Obnaša se kot element seznama (z oznako)
`display: none`	Element se ne prikaže in ne zavzema prostora

CSS Prikazovalniki

Vadnica.org

Povezave

Podpora