Основное различие между display: none и visibility: hidden заключается в том, как они влияют на отображение и поведение элемента на странице:

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

Пример:

<div style="width:100px; height:100px; background:red;">Красный блок</div>
<div style="width:100px; height:100px; background:blue; display:none;">Синий блок (display:none)</div>
<div style="width:100px; height:100px; background:green; visibility:hidden;">Зелёный блок (visibility:hidden)</div>

В этом примере синий блок не будет виден и не займет места, а зелёный блок будет невидим, но место под него останется.

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

В чём различие между display: none и visibility: hidden?