Как скрыть элемент в CSS? В чём разница способов?

Question

Accepted Answer

## Что важно понять

Способы разные по влиянию на доступность и раскладку.

## Варианты

- `display: none` — нет в раскладке, обычно не доступен фокусу/AT как видимый контент.
- `visibility: hidden` — место сохраняется, невидим.
- `opacity: 0` — невидим, место есть, может ловить события (если не отключить).
- visually-hidden / `.sr-only` — скрыт визуально, но доступен скринридерам.
- `hidden` attribute / `content-visibility` — отдельные кейсы.

```css
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
```

## Итог

Выбирайте способ по вопросу: убрать из layout, оставить место или оставить для AT.