CSS visibility Property
The visibility property defines whether an element is visible or not.
Possible Values
- visible - the element is displayed in the normal way - this is the default value.
- hidden - the element will not be visible but the box it generates will still take up space on the page.
- collapse - only for use on table elements, it removes a column or row but doesn't affect the table layout - the space is now available for other content.
- inherit - the value is inherited from the parent element.
Code Example
div{visibility: hidden;}
Below are three <h3> headings - the first and third with a visibility:
visible property and the middle one with visibility set to
hidden. As you can see the element still takes up its allocated space on the page even though nothing is displayed - the
element is transparent.
A heading with the visibility property set to visible.
A heading with the visibility property set to hidden.
A heading with the visibility property set to visible.
If an element with visibility: hidden contains other elements which have a visibility: value of visible then these descendant elements are displayed in the normal way.
If you want an element not to occupy any space on the page then give it a display: none declaration and no box is generated.