back

Visibility

Visible is used to set whether an element is visible on a page.
It differs from the display:none in that an element set to be hidden using the visibility property still takes up space on the webpage.

The available options are:
(1) Visible, this means an element is visible on the webpage.
(2) Hidden, the element is invisible.
(3) Inherit, the value will be inherited from its parent element.
(4) Collapse, this is used on table elements only, such as table rows (<tr>) and columns ( <col>), it will hide the element and WON'T leave the space behind.

NOTE: Different browsers handle 'collapse' differently, some may just class it as 'hidden' (taking up space) instead of actually hiding it.

Example