Как скрыть элемент

Короткий ответ

display: none убирает элемент со страницы целиком:

<p>Before the hidden block.</p>
<p style="display: none;">The hidden block.</p>
<p>After the hidden block.</p>

То же самое делает атрибут hidden прямо в HTML: <p hidden>. Его удобно ставить и снимать из JavaScript.

Скрыть, но оставить место

visibility: hidden делает элемент невидимым, но место за ним сохраняется:

<p>Before the hidden block.</p>
<p style="visibility: hidden;">The hidden block.</p>
<p>After the hidden block.</p>

Прозрачность

opacity меняет прозрачность от 0 до 1. Прозрачный элемент остаётся на месте и реагирует на щелчки:

<p style="opacity: 0.4;">Translucent text</p>

Если элемент нужно спрятать только визуально, а программам чтения с экрана оставить, нужен приём из статьи «Как скрыть элемент визуально, но оставить для скринридеров».

Частая ошибка

Элемент прячут через opacity: 0 и считают, что его больше нет. Невидимая кнопка по-прежнему занимает место, ловит щелчки и получает фокус с клавиатуры:

<button style="opacity: 0;" onclick="alert('Clicked!')">Hidden</button>
<span>← there is an invisible button here</span>