Co ovládá vlastnost display?

Question

Accepted Answer

`display` je jedna z nejzásadnějších CSS vlastností — ovládá **jak prvek vytváří box** a jak jsou jeho podřízené prvky rozvrstveny.

```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 */
```

## Vnější vs vnitřní display

`display` ve skutečnosti nastavuje dvě věci: jak se box chová **zvenčí** (block/inline) a jak rozvrhuje své **podřízené prvky** zevnitř (flow/flex/grid). `display: flex` znamená "tento box je na úrovni bloku a jeho podřízené prvky jsou flex prvky."

## display: none vs visibility: hidden

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

Klíčový rozdíl: `display: none` sbalí rozvržení (a skryje před čtečkami obrazovky); `visibility: hidden` zanechá mezeru, kde se prvek nacházel. Použijte `display: none` pro skutečné odstranění, `visibility: hidden` pro skrytí při zachování rozvržení.

## Pracovníci rozvržení

```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);
}
```

Moderní rozvržení je postaveno téměř výhradně na `flex` (1D — řady nebo sloupce) a `grid` (2D — řady a sloupce dohromady).

## Proč je to důležité

`display` určuje celkové chování prvku v rozvržení.

Znalost block vs inline vs inline-block vysvětluje výchozí tok; `flex`/`grid` jsou jádrem moderního rozvržení; a rozdíl mezi `none` a `visibility` je detail, který se často testuje a má praktický význam.