CSS visibility Property

Last Updated : 29 Aug, 2024

The visibility property specifies whether or not an element is visible. It can take values such as visible, hidden, or collapse. Unlike display: none, which removes the element from the layout, visibility: hidden hides the element but maintains its space in the layout.

Syntax

visibility: visible|hidden|collapse|initial|inherit;

Property values

visible: It is the default value. The element is shown or visible normally in the web document.
hidden: The element is not visible and does not take up any space in the layout. It is effectively removed from view.
collapse: For table elements, this value hides the row or column and it does not take up any space in the layout, similar to hidden. It is often used with table rows or columns.
inherit: The element takes on the property value from its parent element, making it inherit the visibility setting from its containing element.
initial: The element is set to the default value of the property as defined by the CSS specification. For visibility, this is typically visible.

Syntax

visibility:hidden;

Example: In this example, we use CSS to style elements. The .geeks class sets visibility: visible;, making the paragraph visible while <h1> is styled green and <body> text aligned center.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | visibility Property
    </title>
    <style>
        h1 {
            color: green;
        }

        .geeks {
            visibility: visible;
        }

        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>visibility:visible;</h2>
    <p class="geeks">
        A computer science portal for geeks
    </p>
</body>

</html>

Output:

visibility: hidden

This property hide the element from the page but takes up space in the document.

Syntax:

visibility:hidden;

Example: In this example we hides the <p> element with class .geeks using visibility: hidden;, making it invisible while styling <h1> in green and center-aligning text within <body>.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS | visibility Property
    </title>
    <style>
        h1 {
            color: green;
        }

        .geeks {
            visibility: hidden;
        }

        body {
            text-align: center;
        }
    </style>
</head>

<body>
    <h1>GeeksforGeeks</h1>
    <h2>visibility:hidden;</h2>
    <p class="geeks">
        A computer science portal for geeks
    </p>
</body>

</html>

Output:

visibility:collapse

This property only used for the table elements. It is used to remove the rows and column from the table but it does not affect the layout of the Table. But their space is available for other content.

Note:This property is not used for other elements except table elements.

Syntax:

visibility:collapse;

Example: In this example we sets visibility: collapse; on a <table> with class .geeks, hiding its borders and content. The page also styles <h1> green and <p> elements within <center> alignment.

html

<!DOCTYPE html>
<html>

<head>
    <title>
        CSS visibility Property
    </title>
    <style>
        table.geeks {
            visibility: collapse
        }

        table,
        th,
        td {
            border: 1px solid red;

            p {
                color: green;
                font-size: 25px;
            }
    </style>
</head>

<body>
    <center>
        <h1 style="color:green;">
            GeeksForGeeks
        </h1>
        <h2>visibility:collapse;</h2>
        <p>geeksforgeeks</p>
        <table style="border:1px solid red;" 
               class="geeks">
            <tr>
                <th>geeks</th>
                <th>for</th>
                <th>geeks</th>
            </tr>
        </table>
        <p>A computer science portal for geeks</p>
    </center>
</body>

</html>

Output:

Supported browsers: The browsers supported by visibility Property are listed below:

CSS Display Property

manaschhabra2

Improve

Article Tags :

Practice Tags :

Misc

CSS visibility Property

Syntax

Property values

Syntax

visibility: hidden

visibility:collapse

Similar Reads

Thank You!

What kind of Experience do you want to share?