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

is styled green and text aligned center.

html

<html>

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

        .geeks {
            visibility: visible;
        }

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

<body>
    <h1>GeeksforGeeksh1>
    <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

element with class .geeks using visibility: hidden;, making it invisible while styling

in green and center-aligning text within .

html

<html>

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

        .geeks {
            visibility: hidden;
        }

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

<body>
    <h1>GeeksforGeeksh1>
    <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

with class .geeks, hiding its borders and content. The page also styles

green and

elements within

alignment.

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>geeksforgeeksp>
        <table style="border:1px solid red;" 
               class="geeks">
            <tr>
                <th>geeksth>
                <th>forth>
                <th>geeksth>
            tr>
        table>
        <p>A computer science portal for geeksp>
    center>
body>

html>

Output:

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

• Google Chrome
• Edge 
• Firefox
• Opera
• Safari

Comment

Explore

CSS Basics
• Introduction2 min read
• Syntax2 min read
• Combinators2 min read
• Selectors6 min read
• Comments2 min read
Styling & Properties
• Colors5 min read
• Bckground4 min read
• Borders5 min read
• Margins Padding3 min read
• Padding6 min read
• Overflow4 min read
• Height & Width4 min read
Text & Fonts
• Text Formatting8 min read
• Fonts4 min read
• Text Align Property3 min read
• Text Decoration Property3 min read
Layouts & Design
• Box Model7 min read
• Display Property3 min read
• Float and Clear4 min read
• Overflow Property2 min read
• Index Property4 min read
Modern Layout Systems
• Flexbox3 min read
• Content Property6 min read
• Align Items Property7 min read
• Align Content Property4 min read
• Grid Layout5 min read
• Grid Template Columns Property4 min read
• Grid Gap Property2 min read
Effects, Animations & Advanced CSS
• Transitions4 min read
• Transform Property8 min read
• Animations6 min read
• Box Shadow Property6 min read
• Text Shadow Property2 min read
• Specificity3 min read
• Variables2 min read
• Pseudo Classes6 min read
• Pseudo Elements4 min read
Courses
• MERN Full Stack Course2 min read