Cosa controlla la proprietà display?

Question

Accepted Answer

`display` è una delle proprietà CSS più fondamentali — controlla **come un elemento genera una box** e come i suoi figli vengono disposti.

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

## Outer vs inner display

`display` in realtà imposta due cose: come la box si comporta **esternamente** (block/inline) e come dispone i suoi **figli** internamente (flow/flex/grid). `display: flex` significa "questa box è a livello di blocco, e i suoi figli sono elementi 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 */
```

Una distinzione fondamentale: `display: none` comprime il layout (e nasconde dai screen reader); `visibility: hidden` lascia uno spazio dove l'elemento era. Usa `display: none` per rimuovere davvero, `visibility: hidden` per nascondere preservando il layout.

## The layout workhorses

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

Il layout moderno è costruito quasi interamente su `flex` (1D — righe o colonne) e `grid` (2D — righe e colonne insieme).

## Perché è importante

`display` determina l'intero comportamento di layout di un elemento.

Conoscere block vs inline vs inline-block spiega il flusso predefinito; `flex`/`grid` sono il nucleo del layout moderno; e la distinzione `none` vs `visibility` è un dettaglio frequentemente testato e praticamente importante.