display: none полностью удаляет элемент из потока документа. Он не занимает места, не реагирует на события и не отображается. Эквивалентно тому, что элемента вообще нет на странице.
visibility: hidden скрывает элемент, но оставляет место, которое он занимал бы в потоке документа. Элемент не отображается, но его размеры и позиция влияют на расположение других элементов. Он не реагирует на события.
| Свойство | Место в потоке документа | Отображение | Влияние на другие элементы | Реакция на события |
|---|---|---|---|---|
display: none | Нет | Нет | Не влияет | Нет |
visibility: hidden | Есть | Скрыт | Влияет | Нет |