Свойство visibility: hidden не удаляет элемент из потока документа в CSS. 1 Это означает, что скрытый элемент занимает место на странице и влияет на остальные элементы. 1

В отличие от свойства display: none, которое скрывает элемент и удаляет его из общего потока элементов, в случае с visibility: hidden браузер только скрывает элемент, зарезервировав под него место на веб-странице. 2 Поэтому на месте скрытого элемента остаётся пустое пространство, совпадающее по размеру с размером скрытого элемента. 2

Свойство visibility: hidden может быть полезным, когда нужно временно скрыть элемент, но сохранить его размер и позицию. 1

Для полного удаления элемента из макета рекомендуется использовать свойство display: none. 14