1. Отображение: нет
   Самый распространенный и простой подход — использовать свойство CSS display: none. При этом элемент полностью удаляется из потока документов, делая его невидимым и не занимающим места.

.hidden-element {
  display: none;
}

2. Видимость: скрытый
   Подобно предыдущему методу, visibility: hiddenскрывает элемент, но сохраняет его пространство в макете. Другими словами, элемент остается в потоке документов, но не виден пользователю.

.hidden-element {
  visibility: hidden;
}

3. Непрозрачность: 0
   Установив для свойства opacityзначение 0, вы можете сделать элемент прозрачным, не удаляя его из потока. Это может быть полезно для создания плавных переходов или эффектов затухания.

.hidden-element {
  opacity: 0;
}

4. Высота: 0 / Ширина: 0
   Если вы хотите скрыть элемент, продолжая занимать место, вы можете установить его высоту и ширину на ноль.

.hidden-element {
  height: 0;
  width: 0;
}

5. Положение: абсолютное
   Использование position: absoluteи указание координат за пределами видимой области экрана эффективно скрывает элемент.

.hidden-element {
  position: absolute;
  left: -9999px;
  top: -9999px;
}

<старый старт="6">

Clip: Rect
Свойство clipпозволяет определить прямоугольную область для отображения внутри элемента. Установив значения rect(0, 0, 0, 0), вы эффективно скроете элемент.

.hidden-element {
  position: absolute;
  clip: rect(0, 0, 0, 0);
}

7. Переполнение: скрыто.
   Если содержимое элемента выходит за его границы, установка overflow: hiddenв его родительском контейнере скроет лишнее содержимое.

.container {
  overflow: hidden;
}

8. Видимость: свернуть (для таблиц)
   При работе с таблицами установка visibility: collapseдля ячеек или строк таблицы скрывает их, сохраняя при этом структуру таблицы.

.hidden-cell {
  visibility: collapse;
}

9. Transform: Scale(0)
   Уменьшение элемента до нуля с помощью transform: scale(0)эффективно скроет его. Этот метод можно анимировать для плавных переходов.

.hidden-element {
  transform: scale(0);
}

10. Использование JavaScript
    Если вы предпочитаете программный подход, вы можете манипулировать DOM с помощью JavaScript для динамического скрытия элементов. Вот простой пример:

const element = document.getElementById('myElement');
element.style.display = 'none';

Вот и все — десять умных способов скрыть элементы на вашем веб-сайте. Не забывайте использовать эти методы ответственно и учитывать их влияние на доступность и удобство использования. Приятного кодирования!