Чем отличаются `visibility: hidden` и `display: none`?

Question

Accepted Answer

## Главная разница

- **`display: none`** — элемент **убирается из layout**, место схлопывается, недоступен для фокуса/a11y-дерева в типичном случае.
- **`visibility: hidden`** — элемент **невидим**, но **занимает место**; потомки могут быть `visibility: visible`.

```css
.removed { display: none; }
.invisible { visibility: hidden; }
```

## Ещё

`opacity: 0` — тоже занимает место и часто кликабелен (нужен `pointer-events`). Для анимации появления чаще opacity/visibility, чем display.