CSS Visibility

The visibility property in CSS is used to control the visibility of elements. It allows you to show or hide elements without affecting the layout of the document.

There are several values for the visibility property, each serving different purposes. Understanding these values helps in creating more interactive and visually appealing web pages.

Visibility Values

visibility: visible; - The default value. The element is visible.

Try yourself 
        
             .visible-example {
     visibility: visible;
     border: 1px solid black;
     padding: 10px;
 }

visibility: hidden; - The element is not visible, but it still takes up space in the layout.

Try yourself 
        
             .hidden-example {
     visibility: hidden;
     border: 1px solid black;
     padding: 10px;
 }

visibility: collapse; - For table rows, columns, column groups, and row groups, this value hides the element and removes it from the table layout. For other elements, it acts like visibility: hidden;.

Try yourself 
        
             .collapse-example {
     visibility: collapse;
     border: 1px solid black;
     padding: 10px;
 }

visibility: inherit; - The element inherits the visibility property from its parent.

Try yourself 
        
             .inherit-example {
     visibility: inherit;
     border: 1px solid black;
     padding: 10px;
 }

Visibility vs Display

It is important to note the difference between the visibility and display properties. While visibility hides the element but maintains its space in the layout, display: none; removes the element entirely from the layout.

Try yourself 
        
             .visibility-example {
     visibility: hidden;
     border: 1px solid black;
     padding: 10px;
 }
 .display-example {
     display: none;
     border: 1px solid black;
     padding: 10px;
 }

Examples

visibility: visible; - The element is visible:

Try yourself 
        
             .visibility-visible-example {
     visibility: visible;
     border: 1px solid black;
     padding: 10px;
     margin-bottom: 10px;
 }

visibility: hidden; - The element is hidden but still takes up space:

Try yourself 
        
             .visibility-hidden-example {
      visibility: hidden;
      border: 1px solid black;
      padding: 10px;
      margin-bottom: 10px;
  }

visibility: collapse; - The element is hidden and does not take up space (only applies to table elements):

Try yourself 
        
             .visibility-collapse-example {
     visibility: collapse;
     border: 1px solid black;
     padding: 10px;
     margin-bottom: 10px;
 }

visibility: inherit; - The element inherits visibility from its parent:

Try yourself 
        
             .visibility-inherit-example {
     visibility: inherit;
     border: 1px solid black;
     padding: 10px;
     margin-bottom: 10px;
 }

Practical Tips

Here are some practical tips for using the visibility property: