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

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

display: none

• Элемент не занимает места, соседи сдвигаются.
• Не попадает в render tree, недоступен скринридерам.
• Нельзя кликнуть или сфокусировать.
• Переключение вызывает пересчёт раскладки.

visibility: hidden

• Элемент занимает место, но не отрисовывается.
• Тоже скрыт от скринридеров и недоступен для кликов и фокуса.
• Потомок может стать видимым через visibility: visible.
• Можно плавно анимировать вместе с opacity.

.tooltip { visibility: hidden; opacity: 0; transition: opacity .2s, visibility .2s; }
.tooltip.open { visibility: visible; opacity: 1; }

Коротко для собеседования

display: none — элемента нет в раскладке, visibility: hidden — элемент невидим, но место сохраняется.

Подробнее: MDN — visibility