CSS | visibility Property - GeeksforGeeks

09 Aug, 2019
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 values:
visible: It is the default value. The element is show or visible normally in the web document.Syntax:visibility:hidden;Example:<!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:
Syntax:
visibility:hidden;
Example:
<!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:
hidden: This property hide the element from the page but takes up space in the document.Syntax:visibility:hidden;Example:<!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:
Syntax:
visibility:hidden;
Example:
<!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:
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:<!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:
Syntax:
visibility:collapse;
Example:
<!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:
Google Chrome
Internet Explorer
Firefox
Opera
Safari
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
shubham_singh
CSS-Properties
Technical Scripter 2018
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
How to apply style to parent if it has child with CSS?
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property