display: none

The display: none value removes the element completely from the visual layout of the page. The element will be hidden, and the page will be displayed as if the element did not exist. This is different from visibility: hidden;, which leaves the element in its place.

EXAMPLE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hidden Elements</title>
    <style>
        .container {
            padding: 20px;
        }

        .hidden-element {
            display: none; /* Element will be completely hidden */
        }

        .visible-element {
            display: block;
            padding: 10px;
            margin: 5px 0;
        }
        
        .hidden-text {
            display: none;
        }

        /* Toggle example on hover */
        .toggle-container:hover .hidden-text {
            display: block;
        }
        .toggle-container:hover .visible-text {
            display: none;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Showing and Hiding Elements</h2>
        
        <div class="visible-element">This element is visible</div>
        <div class="hidden-element">This element is hidden</div>
        
        <div class="toggle-container">
            <p class="visible-text">Hover over me!</p>
            <p class="hidden-text">Hidden text appears</p>
        </div>
    </div>
</body>
</html>

RESULT