# Affichage

> Propriété CSS qui détermine comment un élément se comporte dans la mise en page : bloc, en ligne, conteneur flexible ou grille, entre autres valeurs.

- Auteur : Clément Hadrot
- Publié le : 2026-09-25
- Mis à jour le : 2026-09-25
- URL : https://wpmoderne.dev.wordpress-developpement.fr/lexique/affichage-css/

Deux paragraphes s'empilent naturellement l'un sous l'autre, tandis que deux mots d'une même phrase restent côte à côte : ce contraste de comportement, avant même toute mise en forme volontaire, découle d'une seule propriété CSS qui gouverne le mode de disposition de chaque élément.

## Des valeurs qui structurent toute mise en page WordPress

Par défaut, les navigateurs appliquent une feuille de style interne qui attribue `block` aux titres et paragraphes, `inline` aux éléments comme `<a>` ou `<strong>`. Un thème WordPress moderne s'appuie massivement sur les valeurs `flex` et `grid` pour organiser les gabarits de blocs, notamment via les blocs natifs comme « Groupe » ou « Colonnes », dont les styles générés utilisent justement ces propriétés d'affichage.

## Exemple

```
.entete-site {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
```

## Bon à savoir

- La valeur `none` retire l'élément du flux visuel et de l'accessibilité clavier, contrairement à `visibility: hidden` qui conserve l'espace occupé sur la page.
- Un élément passé en `flex` ou `grid` devient un contexte de mise en page pour ses enfants directs uniquement : les petits-enfants restent soumis à leurs propres règles.
- Certaines propriétés comme `vertical-align` n'ont d'effet que sur les éléments en ligne, ce qui explique pourquoi elles semblent parfois « ne rien faire » une fois un élément basculé en bloc.
- La valeur `inline-block` combine les deux mondes : l'élément reste sur la même ligne que ses voisins tout en acceptant une largeur, une hauteur et des marges verticales, contrairement à un simple élément `inline`.