Space (Spacing)

Tailwind CSS 🟢 Junior

Definition

Utilitaires space-x et space-y qui ajoutent un espacement entre les enfants d'un conteneur via des marges automatiques. Alternative a gap pour les anciens navigateurs.

Analogie

Des separateurs automatiques entre les livres sur une etagere.

Exemple de code

<div class="space-y-4">
  <p>Premier</p>
  <p>Deuxieme (margin-top: 1rem auto)</p>
  <p>Troisieme</p>
</div>

Cas d'usage

Espacer uniformement les enfants d'une liste verticale ou horizontale.

Anti-pattern

Utiliser space-* quand gap est disponible (gap est plus fiable avec flex/grid).

Termes lies

#styling#tailwind