CSS VISIBILITY

This property controls whether the content of an element box is rendered (including the borders and backgrounds.) If an element box is invisible it still affects document layout as if it were visible (to prevent an element box from affecting layout, the ‘display’ property should be set to ‘none’.)

Example
1
2
3
p {
  visibility: hidden
}
1
2
3
<p style="visibility: hidden">
  content
</p>

Possible Values

inherit: Explicitly sets the value of this property to that of the parent.
visible: The element box is visible.

hidden: The element box is invisible (completely transparent to content beneath), but still affects document layout flow as if it were visible.

collapse: Unless this value is used in the context of table rows or columns, it will have the same effect as ‘hidden’. In the context of tables, spanned cells may be clipped and reacts similar to ‘display: none’ for the table element.

hide: The element box is invisible (completely transparent to content beneath), but still affects document layout flow as if it were visible.

show: The element box is visible.