visibility: hidden preserves an element’s layout space

In a few sentences

In brief

The element is hidden, but the arrangement preserves its box.

Useful to know

visibility: hidden makes the element invisible, keeping its place in the arrangement. Unlike display: none, the rest of the content does not automatically move to a released area. [1]

This may be appropriate for a temporarily hidden indicator whose appearance does not have to move the text. The hidden element cannot get focus and is removed from the accessibility tree. Therefore, this setting is not a way to leave an invisible but usable button. Choose the behavior according to the task, not just how the page looks.

Sources

For further detail and to check the information:

[1] MDN — visibility ↗