Чем отличается скрытие элементов с помощью opacity, visibility и display: none?

Question

opacity: 0 делает элемент невидимым, но он продолжает занимать место и реагировать на события. visibility: hidden также скрывает элемент, сохраняя его место в layout, но события мыши не срабатывают. display: none полностью удаляет элемент из потока документа, освобождая занимаемое место.

YeaHub · Accepted Answer

Различия между методами скрытия:opacity: 0:Элемент становится невидимым, но продолжает занимать пространство в layout.Остается доступным для взаимодействия (события мыши, фокус и т.д.).Можно анимировать плавное появление/исчезновение.visibility: hidden:Элемент невидим, но сохраняет свое место в layout.Не реагирует на события мыши (события не срабатывают).Можно анимировать с помощью переходов.display: none:Элемент полностью удаляется из потока документа.Не занимает место, не реагирует на события.Не может быть анимирован стандартными средствами CSS.Практический пример:.hidden-opacity {
  opacity: 0; /* Невидим, но место занято */
}

.hidden-visibility {
  visibility: hidden; /* Невидим, место занято, но не кликабельно */
}

.hidden-display {
  display: none; /* Полностью удален из layout */
}Когда использовать:Используйте opacity для плавных анимаций прозрачности.Используйте visibility когда нужно скрыть элемент, но сохранить layout.Используйте display: none когда элемент нужно полностью удалить из документа.