display: none

Vrednost display: none element popolnoma odstrani iz vizualne postavitve strani. Element bo skrit, stran pa se bo prikazala, kot da element ne obstaja. To je drugače kot pri visibility: hidden;, kjer element ostane na svojem mestu.

PRIMER

<!DOCTYPE html>
<html lang="sl">
<head>
    <meta charset="UTF-8">
    <title>Skrivanje elementov</title>
    <style>
        .vsebnik {
            padding: 20px;
        }

        .skriti-element {
            display: none; /* Element bo popolnoma skrit */
        }

        .vidni-element {
            display: block;
            padding: 10px;
            margin: 5px 0;
        }
        
        .skriti-tekst {
            display: none;
        }

        /* Primer preklapljanja ob lebdenju */
        .preklopni-vsebnik:hover .skriti-tekst {
            display: block;
        }
        .preklopni-vsebnik:hover .vidni-tekst {
            display: none;
        }
    </style>
</head>
<body>
    <div class="vsebnik">
        <h2>Prikaz in skrivanje elementov</h2>
        
        <div class="vidni-element">Ta element je viden</div>
        <div class="skriti-element">Ta element je skrit</div>
        
        <div class="preklopni-vsebnik">
            <p class="vidni-tekst">Lebdi nad mano!</p>
            <p class="skriti-tekst">Skriti tekst se prikaže</p>
        </div>
    </div>
</body>
</html>

REZULTAT