CSS visibility Property

The CSS visibility property is used to hide an element while leaving the space where it would have been intact. It can also be used to hide rows or columns of a table. Elements that are hidden using the visibility property become invisible but they are not removed from the flow of the page. They still affect the layout as if they are visible.

The initial value of visibility property is visible. You can apply it to all elements. The CSS visibility property can be inherited which means all elements that are children of a given element will also have the same value for visibility property as the parent element. The final computed value of this property is the exact same value that you initially supplied. It is also animatable.

Syntax

This is the formal syntax for using CSS visibility property.

visibility: visible | hidden | collapse | inherit

Here are some examples of using this property.

/* Keyword values */
visibility: visible;
visibility: hidden;
visibility: collapse;

/* Global values */
visibility: inherit;
visibility: initial;
visibility: unset;

Acceptable Values

visible

This is the default value. It will make the element visible.

hidden

This value will make the element invisible 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 will still be visible if they have visibility:visible (this doesn’t work in IE up to version 7).

collapse

This value is used to hide table rows, columns, column groups, and row groups. The row(s) and column(s) hidden using this value will have their space occupied as if they have display: none; set on them. 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.

Important Notes

There are a few things that you should keep in mind while using this property.

  • The support for visibility:collapse is missing or partially incorrect in some modern browsers. In many cases, it may not be correctly treated like visibility:hidden on elements other than table rows and columns.

  • The visibility:collapse rule 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.

Working Examples

See the Pen CSS visibility Property by Tutorialio (@tutorialio) on CodePen.

Browser Support

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

Further Reading

  1. Read more about the CSS <visibility> property on MDN.
  2. You can also read the CSS <visibility> property on CSSWG.

Reader Comments

1. You can register or login to post a comment. Asking readers to register improves the quality of discussion.

2. As a registered user, you will also get to access features like choosing between a light and dark theme or anything else that we might implement in future.

Follow Us For Updates

FacebookTwitterGoogle+
Go To Top