CSS Visibility Property

The CSS visibility property is used to specify whether an element is visible or not.

Note: An invisible element also take up the space on the page. By using display property you can create invisible elements that don’t take up space.

Syntax:

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

CSS Visibility Parameters

visible:It is the by default value. It specifies that the element is visible.

hidden:It specifies that the element is invisible (but still takes up space).

collapse:It is used only for table elements. It is used to remove a row or column, but it does not affect the table layout.

The space taken up by the row or column will be available for other content.

If collapse is used on other elements, it renders as “hidden”

initial:It is used to set this property to its default value.

inherit:It is used to inherit this property from its parent element.

CSS Visibility Example

    <!DOCTYPE html>  
    <html>  
    <head>  
    <style>  
    h1.visible {  
        visibility: visible  
    }  
    h1.hidden {  
        visibility: hidden  
    }  
    </style>  
    </head>  
    <body>  
    <h1 class="visible">I am visible</h1>  
    <h1 class="hidden">I am invisible</h1>  
    <p><strong>Note:</strong> An invisible element also take up the space on the page.   
    By using display property you can create invisible elements that don't  
     take space.</p>  
    </body>  
    </html>  

Was this article helpful?

Related Articles

Leave A Comment?