CSS VISIBILITY

  • Share
  • Share

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

p { visibility: hidden }

<p style=”visibility: hidden”>content</p>

 

Possible Values

Value Description
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.