Que contrôle la propriété display ?

Question

Accepted Answer

`display` est l'une des propriétés CSS les plus fondamentales — elle contrôle **comment un élément génère une boîte** et comment ses enfants sont disposés.

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

## Affichage externe vs interne

`display` définit en réalité deux choses : comment la boîte se comporte **à l'extérieur** (block/inline) et comment elle dispose ses **enfants** à l'intérieur (flow/flex/grid). `display: flex` signifie « cette boîte est au niveau du bloc, et ses enfants sont des éléments 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 */
```

Une distinction clé : `display: none` réduit la mise en page (et masque aux lecteurs d'écran) ; `visibility: hidden` laisse un espace où l'élément se trouvait. Utilisez `display: none` pour vraiment supprimer, `visibility: hidden` pour masquer tout en préservant la mise en page.

## Les chevaux de bataille de la mise en page

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

La mise en page moderne est construite presque entièrement sur `flex` (1D — lignes ou colonnes) et `grid` (2D — lignes et colonnes ensemble).

## Pourquoi c'est important

`display` détermine l'intégralité du comportement de mise en page d'un élément.

Connaître block vs inline vs inline-block explique le flux par défaut ; `flex`/`grid` sont au cœur de la mise en page moderne ; et la distinction entre `none` et `visibility` est un détail fréquemment testé et pratiquement important.