Что контролирует свойство display?

Question

Accepted Answer

`display` — одно из самых фундаментальных свойств CSS — оно контролирует **как элемент генерирует блок** и как располагаются **его потомки**.

```css
.a { display: block; }        /* full width, starts new line (div, p, section) */
.b { display: inline; }       /* flows in text, ignores width/height (span, a) */
.c { display: inline-block; } /* flows inline BUT respects width/height/margins */
.d { display: none; }         /* removed entirely — no space, not rendered */
.e { display: flex; }         /* flex container — 1D layout for children */
.f { display: grid; }         /* grid container — 2D layout for children */
```

## Внешний и внутренний display

`display` на самом деле устанавливает две вещи: как блок ведёт себя **снаружи** (block/inline) и как он расположает своих **потомков** **изнутри** (flow/flex/grid). `display: flex` означает "этот блок блочного уровня, и его потомки — элементы flex."

## display: none vs visibility: hidden

```css
.gone   { display: none; }        /* removed from layout — takes NO space */
.hidden { visibility: hidden; }    /* invisible but STILL occupies its space */
```

Важное различие: `display: none` сворачивает макет (и скрывает от программ чтения с экрана); `visibility: hidden` оставляет пробел там, где был элемент. Используйте `display: none` для полного удаления, `visibility: hidden` для скрытия с сохранением макета.

## Рабочие лошадки макета

```css
.container {
  display: flex;          /* lay children in a row/column (one dimension) */
  gap: 1rem;
}
.grid {
  display: grid;          /* lay children in rows AND columns (two dimensions) */
  grid-template-columns: repeat(3, 1fr);
}
```

Современный макет построен почти полностью на `flex` (1D — строки или столбцы) и `grid` (2D — строки и столбцы вместе).

## Почему это важно

`display` определяет полное поведение макета элемента.

Знание о различиях между block, inline и inline-block объясняет стандартный поток; `flex`/`grid` — основа современного макета; а различие между `none` и `visibility` — часто тестируемая, практически важная деталь.