CSS | visibility Property

This property is used to specify whether an element is visible or not in a web document but the hidden elements take up space in the web document. Use the display property to remove or display property to both hide and delete an element from the browser.

Syntax:

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

Property:

  • visible: It is the default value. The element is show or visible normally in the web document.

    Syntax:

    visibility:hidden;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <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</h2>
        </body>
    </html>                                

    chevron_right

    
    

    Output:

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

    Syntax:

    visibility:hidden;

    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <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</h2>
        </body>
    </html>                    

    chevron_right

    
    

    Output:

  • 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
        <head>
            <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>                    

    chevron_right

    
    

    Output:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.



Improved By : shubham_singh