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

Question

Accepted Answer

## Суть на практике
Оба «прячут» элемент, но по-разному влияют на layout и доступность.

## Сравнение

| | `display: none` | `visibility: hidden` |
|---|---|---|
| Место в потоке | не занимает | занимает |
| Потомки | не рисуются | можно сделать `visible` |
| a11y | обычно вне accessibility tree | часто остаётся «пустое» место |

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

Есть ещё `opacity: 0` (элемент кликабелен, если не отключить pointer-events) и `content-visibility` для оптимизации.

## Итог
Нужно убрать из раскладки — `display: none`; оставить дыру под layout — `visibility: hidden`.

	`display: none`	`visibility: hidden`
Место в потоке	не занимает	занимает
Потомки	не рисуются	можно сделать `visible`
a11y	обычно вне accessibility tree	часто остаётся «пустое» место