В чем разница между свойствами display: none и visibility: hidden?

display: none полностью удаляет элемент из потока документа. Он не занимает места, не реагирует на события и не отображается. Эквивалентно тому, что элемента вообще нет на странице.

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