CSS GUIDE VISIBILITY
This document is a work in progress and is subject to change.
Contents
Summary
The visibility property specifies whether the boxes generated by an element are rendered, hidden, or collapsed. Except for one exception (described below), the layout of the page is still affected by invisible boxes.
| Applicability: | The visiblity property can be used for all CSS elements. | |
| Media Group: | Visual | |
| Inherited: | Yes |
Syntax
TARGET_ELEMENT{ visibility: visible|hidden|collapse }
Legal Values
The legal values of the visiblity property are:
- visible: The box generated by the element is visible.
- hidden: The box generated by the element is invisible however the layout of the page is still affected.
- collapse: For the row, row group, column, and column group elements, this value causes the entire row or column to be removed from the display. Unlike the hidden value, it does not affect the layout as other content can be placed where the row or column data would normally be. If used on any other element, the collapse value has the same meaning as the hidden value.
Mozilla Recommended Values
Usage Examples
/* Set the visibility to visible */
p { visibility: visible }
/* Set the visibility to hidden */
p { visibility: hidden }
/* Set the visibility to collapse */
p { visibility: collapse }
Notes
Even though an element's visibility is hidden and not drawn on the screen, the layout is still affected. If an element's visiblity is hidden, the descendents of the element will be visible if they have their visibility set to visible.
For the row, row group, column, and column group elements, the collapse value causes the entire row or column to be removed from the display. Unlike the hidden value, it does not affect the layout as other content can be placed where the row or column data would normally be. If the collapse value is used on any other element, the collapse value has the same meaning as the hidden value.
