The visibility property specifies whether an element is visible or invisible.
div {
visibility: hidden;
}
| Property | Value | Explanation |
|---|---|---|
| visibility | visible | the element is visible (default) |
| hidden | the element is invisible (however, the area of the element remains) |
Comparison with the display property
The visibility property :
AAAAA<span style="visibility: hidden;">BBBBB</span>CCCCC
AAAAACCCCC
The display property :
AAAAA<span style="display: none;">BBBBB</span>CCCCC
AAAAACCCCC
<html> <head> <title>TAG index</title> <style type="text/css"> .example { visibility: hidden; } </style> </head> <body> <p>This text is displayed. [<span class="example">This text is not displayed.</span>] This text is displayed.</p> <p>This text is displayed.</p> <p class="example">This text is not displayed.</p> <p>This text is displayed.</p> </body> </html>
This text is displayed. [This text is not displayed.] This text is displayed.
This text is displayed.
This text is not displayed.
This text is displayed.