CSS Reference Property

visibility

The visibility property can be used to control the rendering of an element’s boxes so that the element becomes hidden.

The hidden value is used to hide non-table elements, and the collapse value is used to hide the table rows and columns.

Elements hidden using the visibility property are invisible but are not removed from the flow of the page. They still affect the layout as if they are visible because they are not removed from the page flow as with the display property—If an element is hidden using the display property, it is removed from the page and its position is occupied by other elements on the page, but when it is hidden using the visibility property, the area it occupies on the page is still preserved.

The effect of visibility on an element when it is set to hidden is practically like making the element fully transparent—it is still there, but you cannot see it.

When an element is hidden using the visibility property, it is possible to make its descendant elements visible by applying visibility: visible to them. This is another difference between the visibility property and the display property: elements hidden using the display property will be removed from the page, as will all their descendants, and there is no way to override that, but with visibility, making the descendants visible is possible. See the display property entry for details.

Pointer events are not triggered on elements hidden using the visibility property, but events on their visible descendant elements are still fired normally. Because of that, the events attached to the hidden element can also be triggered through one of its visible descendants. See the live demo section for an example.

Official Syntax

Syntax:

visibility: visible | hidden | collapse | inherit

Initial: visible
Applies To: all elements
Animatable: yes

Values

visible

Makes the element visible. This is the default value, as all elements are initially visible.

hidden

Makes an element invisible (fully transparent, not drawn) without removing it from the flow of the page. The area occupied by the element is preserved as if it were visible.

Descendants of the element are visible unless specified otherwise.

inherit

The element inherits its parent’s visibility. Useful when you want to hide the descendants of an element which you have hidden using hidden.

collapse

Used to hide table rows, columns, column groups, and row groups.

The row(s) and column(s) hidden have their space occupied as if they have display: none; set on them (see display).

However, the heights and widths of the remaining rows and columns are calculated as if the hidden rows and columns are still present. This was designed for fast removal of a row/column from a table without having to recalculate widths and heights for every portion of the table.

If used on elements other than rows, row groups, columns, or column groups, collapse has the same meaning as hidden.

Using collapse on a flexbox item causes it to become a collapsed flex item, producing an effect similar to collapse on a table-row or table-column: the collapsed flex item is removed from rendering entirely, but leaves behind a “strut” that keeps the flex line’s cross-size stable. For more information, see the flex entry.

Notes

The implementation for visibility: collapse is missing or partially incorrect in some modern browsers. It is almost recommended not to use it at this time.

Examples

.element {
    visibility: hidden;
}

.child {
    visibility: inherit;
}

tr {
    visibility: collapse;
}

Live Demo

View this demo on the Codrops Playground

Browser Support

The visibility property works in all major browsers: Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.

Support for visibility: collapse; varies a lot between browsers. There are many quirks and compatibility issues. Here are some of these quirks:

In many cases collapse may not be correctly treated like hidden on elements other than table rows and columns (even though it should).
visibility: collapse may change the layout of a table if the table has nested tables within the cells that are collapsed, unless visibility: visible is specified explicitly on nested tables.
Webkit browsers will collapse a row, but the space it occupied will remain. And if the table cells inside had a border, that will collapse into a single border along the top edge.
Chrome and Safari browsers will not collapse a column or column group.
Firefox doesn’t hide borders when hiding <col> and <colgroup> elements if border-collapse: collapse is set.
In any browser, if a cell is in a column that is collapsed (whether or not it actually collapses) the text in that cell will not be displayed.
Opera (pre WebKit) will collapse everything, except a table cell (which is correct). It also doesn’t seem to hide a <tfoot> if it is adjacent to a visible <tbody>