Hide or show an element.
Syntax
visibility: visible | hidden | collapse | inherit ;
visible - Make the generated boxes visible.
hidden - Make the generated boxes invisible without removing them from the layout. Descendant boxes can be made visible.
collapse - Remove a table object from display; the space it occupied will be filled by subsequent siblings.
For non-table objects, this acts just like hidden.
The way browsers handle collapse is not consistent so its use should be avoided.
inherit - Inherit the property from a parent element.
When working with table objects (rows, row groups, columns, and column groups), visibility:collapse should be used in preference to display: none, this will keep the structural integrity of the table intact. If visibility:collapse is specified for any element other than an internal table object, it will behave as visibility:hidden.
Unlike display:none, setting an element’s visibility to hidden does not remove the related element from the rendering process completely, the invisible box can still affect the layout of other elements on the page.
Examples:
h1 { visibility: hidden; }
.emw3class {
visibility: visible; }
#emw3id { visibility: collapse; }
Try it:
An invisibility cloak is a magical garment which renders whatever it covers unseeable. They can be made from hair of Demiguise, a magical creature that possesses the power to become invisible. |
Browser Support: All major browsers support Visible and Hidden, The CSS2 value, collapse has limited support.
“People who know little are usually great talkers, while men who know much say little” ~ Jean Jacques Rousseau
Related:
float - Shift to the left (or right) allowing other content to flow/wrap alongside.
display - How to display an HTML element.
opacity - Opacity level for an element.