Html & Html5

The World's best Software Development Study Portal

CSS Visibility

By this property you can make appear to any element visible or not. This visible element may take the space but not visible.

Let's understand this by the following program:-

<!DOCTYPE html>




h3.show {

      visibility: visible;


h3.hidden {

      visibility: hidden;





<h3 class="hidden> This will not visible </h3>

<h3 class="show"> This will visible </h3>



Output of the Program

This will not visible

This will visible

As we can see the hidden element also takes up the space.

Some more values of visibility property.These are mentioned below with description

Value Description
visible By default value and element is visible here in this property
hidden element is not visible here in this property but takes up the space
collapse used in the table element to hide any row or column but takes the space
inherit It inherits this property from its parent element.
initial It is used to set the property to its default value.

CSS 3 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute