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.
This is the formal syntax for using CSS
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;
This is the default value. It will make the element visible.
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).
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.
There are a few things that you should keep in mind while using this property.
The support for
visibility:collapseis missing or partially incorrect in some modern browsers. In many cases, it may not be correctly treated like
visibility:hiddenon elements other than table rows and columns.
visibility:collapserule may change the layout of a table if the table has nested tables within the cells that are collapsed, unless
visibility:visibleis specified explicitly on nested tables.
visibility property works in all major browsers like Chrome, Firefox, Safari, Opera, Internet Explorer, and on Android and iOS.
- Read more about the CSS
<visibility>property on MDN.
- You can also read the CSS
<visibility>property on CSSWG.
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.