Affichage

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.