From W3C Wiki
Jump to: navigation, search


The visibility property specifies whether the boxes generated by an element are rendered.


Values visible | hidden | collapse | inherit
Initial value visible
Applies to all elements
Inherited Yes


  • visible
    The element is visible.

  • hidden
    The generated box is invisible (fully transparent, nothing is drawn), but still affects layout. Furthermore, descendants of the element will be visible if they have 'visibility: visible'.

  • collapse
    This value causes the entire row or column to be removed from the display, and the space normally taken up by the row or column to be made available for other content. This value is used for row, row group, column, and column group elements. If used on elements other than rows, row groups, columns, or column groups, 'collapse' has the same meaning as 'hidden'.

  • inherit
    Takes the same specified value as the property for the element's parent.


Example A


   visibility: hidden;


  <p>This is a paragraph 1.</p>
  <p id="two">This is a paragraph 2.</p>
  <p>This is a paragraph 3.</p>

Csslist2 visibility.png

CSS Reference

The CSS specification defines the visibility property in 11.2 Visibility.