В чем разница между display: none и visibility: hidden

display: none полностью удаляет элемент из потока документа - он не занимает место и не влияет на верстку. Элемент становится недоступным для взаимодействия и скрывается из DOM дерева для скринридеров.

visibility: hidden делает элемент невидимым, но он продолжает занимать место в верстке. Элемент остается в DOM дереве, но недоступен для взаимодействия.

Пример:

.hidden-display {
  display: none;  /* элемент исчезнет полностью */
}

.hidden-visibility {
  visibility: hidden;  /* элемент невидим, но место остается */
}

Ключевые различия:

1. Влияние на верстку: none убирает элемент, hidden сохраняет пространство
2. Доступность: оба скрывают от пользователя, но hidden остается в DOM
3. Производительность: none может вызвать перерасчет верстки, hidden обычно дешевле