This website uses cookies

We use cookies to personalize content and ads, to provide social media features and to analyse our traffic. We also share information about your use of our site with our social media, advertising and analytics partners who may combine it with other information that you've provided to them or that they've collected from your use of their services. Please read more at our privacy policy page.



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.