Visibility

The visibility property is used to specify the element that should be visible or hidden.

When we hide an element with the visibility property, we will hide the content of that tag but it will display the place of it.

CSS Syntax

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

Let's see an example:

<!DOCTYPE html>
<html>
   <head>
       <title>Title of the document</title>
       <style>             
           p{   	
               visibility:hidden;
           }
       </style>
   </head>
   <body>
	
       <h2>This is visibility example.</h2>

       <div> Here is some text for example.</div>
       
       <p>Text, which will don't displayed in brower.</p>

      <div> You see space above this sentence, but actually there is a some text, which has visibility property with hidden value.</div>

   </body>
</html>

As you can see in the above example we use <p> tag which is not displayed in browser but we see the place of the tag.

When we want to hide tag totally then we need to use display property.

Property Values

Value Descriptions
visible This is deafult value. In this case the tag is visible.
hidden This value only visually hides the elements.
collapse Used with particular table elements (rows, row groups, columns, column groups) to remove entire rows or columns. This value has the same meaning as "hidden" when used with other elements.
initial It makes the property use its default value.
inherit It inherits the property from its parents element.




Related articles