visibility: ***;

Browser
  • IE
  • Cr
  • Sf
  • Fx
  • O

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

AAAAABBBBBCCCCC

The display property :
AAAAA<span style="display: none;">BBBBB</span>CCCCC

AAAAABBBBBCCCCC

Example


<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>
Output

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.