Ответ
display: none полностью удаляет элемент из потока документа, освобождая занимаемое им место. Элемент не отображается и не влияет на верстку.
visibility: hidden скрывает элемент, но он остается в потоке документа, занимая место. Просто становится невидимым.
Пример:
<div style="display: none;">Не видно и места нет</div>
<div style="visibility: hidden;">Не видно, но место есть</div>Разница:
display: none— элемент игнорируется браузером, не участвует в рендеринге.visibility: hidden— элемент рендерится, но прозрачный.
Применение:
display: none— для динамического скрытия/показа без сохранения места.visibility: hidden— когда нужно скрыть элемент, но сохранить его влияние на верстку.