visibility

The visibility property defines whether to show or hide an element without changing the layout of a page.

Syntax

visibility: visible | hidden | collapse;

Example

HTML

    <div class="container">
        <span class="visible">This is visible text</span>
        <span class="hidden">This is hidden text</span>
        <span>This is some random text</span>
    </div>

CSS

        .container{
            border: 1px solid black;
            width: fit-content;
        }

        .visible{
            visibility: visible;
            border: 1px solid red;
        }

        .hidden{
            visibility: hidden;
            border: 1px solid blue;
        }

Output

Property Values

visible: The element is visible. (Default value)

hidden: The element is not visible but it still takes its space in the layout.

collapse: This value works only for table rows, row groups, columns, and column groups. It removes a row or column but does not affect the table layout. Other content will take up the space of that element.