Effects
visibility
visibility makes an element invisible. The element keeps its space, so the layout around it doesn't move.
Syntax
visible | hidden | collapsePreview
Code
.box {
display: flex;
}
.box > :nth-child(2) {
visibility: hidden;
}Controls
About
Values
Write one of visible (the initial value), hidden, or collapse.
The preview on this page makes the box display: flex with a helper declaration and puts visibility on the second item only (.box > :nth-child(2) is a selector for the second child of the box). With hidden, item 2 disappears, but the other items stay put and a gap is left where item 2 was.
The space stays
hidden only stops the element from being drawn; the layout stays the same. To remove the element along with its space, use display: none.
An invisible element can't be clicked (as with pointer-events: none), can't take focus with the Tab key, and isn't read by screen readers. opacity: 0 also makes an element invisible, but it can still be clicked and focused, and screen readers still read it.
Showing just a child
visibility is inherited, so the children of an element with hidden are invisible too. A child with visibility: visible, though, is shown on its own. With opacity: 0 there is no way to show just a child.
collapse
On a flex item, it hides the item and closes up the space. The item is taken out of the row, but the flex line keeps the height (cross size) it had with the item in it. Only Firefox supports this; Chrome, Edge, and Safari treat it like hidden and leave a gap.
On a table row (tr and so on) or column (col and so on), it hides the row or column and closes up the space. Safari doesn't support it on columns yet. On anything other than flex items, table rows and columns, and ruby annotations, it is the same as hidden.
In transitions
A transition between visible and another value stays visible the whole way through. So when it transitions together with opacity, the element only becomes invisible after fading out, and becomes visible right away when appearing, so the fade-in can be seen.