CSS visibility Property
This property is used to specify whether an element in a web document is visible or not, but hidden elements take up space in the web document. Use the display property to remove an element from the browser or the display property to hide and delete an element from the browser.
Syntax
visibility: visible | hidden | collapse | initial | inherit;Example
x
<html><head><style> .ex1 { visibility: visible; } .ex2 { visibility: hidden; }</style></head><body><h2 class="ex1">This heading is visible</h2><h2 class="ex2">This heading is hidden</h2><p>Note: that the hidden heading still takes up space on the page.</p></body></html>Property Values
| Value | Description |
|---|---|
| visible | The default value. The element can be seen. |
| hidden | The element is concealed (but still takes up space). |
| collapse |
Only applicable to table rows <tr>, row groups <tbody>, columns <col>, and column groups <colgroup>. This value deletes a row or column but has no effect on the table layout. The row or column's space will be freed up for other content. When collapse is applied to other elements, the result is "hidden."
|
| initial | This property is set to its default value. |
| inherit | This property is inherited from its parent element. |
Supported Browsers
| Property | Chrome | Firefox | Safari | Edge / IE | Opera |
|---|---|---|---|---|---|
| visibility | 1.0 | 1.0 | 1.0 | 4.0 | 4.0 |