Utilitaires

Espacement

Les classes de marge (m), de rembourrage (p) et d’écart (gap) s’appuient sur une même échelle de six valeurs. Elles se déclinent par côté et par point de rupture.

Notation

Le nom d’une classe suit le modèle {propriété}{côtés}-{point de rupture}-{taille}.

Propriété : m pour la marge, p pour le rembourrage.
Côtés : t (haut), b (bas), s (début), e (fin), x (début et fin), y (haut et bas). Sans côté, les quatre côtés sont concernés.
Point de rupture (facultatif) : sm, md, lg, xl, xxl. Sans point de rupture, la classe s’applique dès la plus petite largeur.
Taille : de 0 à 5, ou auto pour les marges.

Les côtés s et e suivent le sens de lecture et correspondent à gauche et droite en français.

Échelle d’espacement

La valeur de base $spacer vaut 1rem. L’échelle est définie dans la carte Sass $spacers.

Échelle d’espacement
Taille	Valeur	Pixels (16 px de base)
`0`	`0`	0
`1`	`.25rem` (`$spacer * .25`)	4
`2`	`.5rem` (`$spacer * .5`)	8
`3`	`1rem` (`$spacer`)	16
`4`	`1.5rem` (`$spacer * 1.5`)	24
`5`	`3rem` (`$spacer * 3`)	48
`auto`	`auto`	Marges seulement

Marges et rembourrages#

Chaque exemple montre un côté. La zone grise est la boîte, l’espace bleu clair indique la marge ou le rembourrage appliqué.

p-3 : rembourrage sur les quatre côtés

px-5 py-1 : rembourrage horizontal large, vertical fin

ps-5 : rembourrage au début

mt-3 mb-1 mx-4 : marges haut, bas et latérales

m-0 : aucune marge

<div class="bg-body-secondary border mb-3"><div class="p-3 text-bg-primary">p-3 : rembourrage sur les quatre côtés</div></div>
<div class="bg-body-secondary border mb-3"><div class="px-5 py-1 text-bg-primary">px-5 py-1 : rembourrage horizontal large, vertical fin</div></div>
<div class="bg-body-secondary border mb-3"><div class="ps-5 text-bg-primary py-2">ps-5 : rembourrage au début</div></div>
<div class="bg-body-secondary border p-1 mb-3"><div class="mt-3 mb-1 mx-4 text-bg-success p-2">mt-3 mb-1 mx-4 : marges haut, bas et latérales</div></div>
<div class="bg-body-secondary border p-1"><div class="m-0 text-bg-success p-2">m-0 : aucune marge</div></div>

Centrer avec les marges auto#

mx-auto centre un bloc de largeur définie. ms-auto le pousse vers la fin, me-auto vers le début.

mx-auto

ms-auto

me-auto

<div class="bg-body-secondary border p-2 mb-2"><div class="mx-auto text-bg-primary p-2" style="width: 12rem">mx-auto</div></div>
<div class="bg-body-secondary border p-2 mb-2"><div class="ms-auto text-bg-primary p-2" style="width: 12rem">ms-auto</div></div>
<div class="bg-body-secondary border p-2"><div class="me-auto text-bg-primary p-2" style="width: 12rem">me-auto</div></div>

Écart entre éléments avec gap#

Sur un conteneur en d-flex ou d-grid, gap-* espace les enfants sans marges. row-gap-* et column-gap-* règlent chaque axe.

Compte courant

Compte épargne

Carte

Virement

Prêt

Épargne

Agences

<div class="d-flex gap-3 mb-3">
  <div class="p-2 text-bg-primary">Compte courant</div>
  <div class="p-2 text-bg-primary">Compte épargne</div>
  <div class="p-2 text-bg-primary">Carte</div>
</div>
<div class="d-grid gap-2" style="grid-template-columns: repeat(2, 1fr)">
  <div class="p-2 text-bg-success">Virement</div>
  <div class="p-2 text-bg-success">Prêt</div>
  <div class="p-2 text-bg-success">Épargne</div>
  <div class="p-2 text-bg-success">Agences</div>
</div>

Espacement responsive#

Ajoutez un point de rupture pour changer l’espacement selon la largeur : ici, 1 rem de rembourrage sur mobile, 3 rem à partir de md.

p-3 p-md-5 : le rembourrage grandit à partir de 768 px

<div class="bg-body-secondary border"><div class="p-3 p-md-5 text-bg-primary">p-3 p-md-5 : le rembourrage grandit à partir de 768 px</div></div>

Classes disponibles

Les marges négatives (mt-n1…) ne sont pas compilées dans Cauri : l’option $enable-negative-margins est désactivée.

Classes disponibles
Famille	Classes	Propriété CSS
Marge	`m-`, `mt-`, `mb-`, `ms-`, `me-`, `mx-`, `my-*`	`margin`, `margin-top`, `margin-bottom`, `margin-left`, `margin-right`
Rembourrage	`p-`, `pt-`, `pb-`, `ps-`, `pe-`, `px-`, `py-*`	`padding`, `padding-top`, `padding-bottom`, `padding-left`, `padding-right`
Écart	`gap-`, `row-gap-`, `column-gap-*`	`gap`, `row-gap`, `column-gap`
Tailles	`0`, `1`, `2`, `3`, `4`, `5`	Valeurs de l’échelle ci-dessus
Marges auto	`m-auto`, `mt-auto`, `mb-auto`, `ms-auto`, `me-auto`, `mx-auto`, `my-auto`	`margin: auto` sur le ou les côtés
Responsive	`{m\|p\|gap\|row-gap\|column-gap}…-{sm\|md\|lg\|xl\|xxl}-*`	Même réglage à partir du point de rupture

Personnaliser l’échelle#

Surchargez $spacers avant d’importer Cauri pour ajouter une taille. Les classes m-6, p-6, gap-6 et leurs variantes sont alors générées. Voir la page Sass.

$spacer: 1rem;
$spacers: (
  0: 0,
  1: $spacer * .25,
  2: $spacer * .5,
  3: $spacer,
  4: $spacer * 1.5,
  5: $spacer * 3,
  6: $spacer * 4.5,
);

Bonnes pratiques

À faire

Utilisez les mêmes tailles pour des éléments de même rôle : la régularité de l’échelle donne le rythme visuel.
Préférez gap-* aux marges pour espacer les enfants d’un conteneur flex ou grille.
Utilisez ms-* et me-* (début et fin) plutôt que des marges gauche et droite fixes.

À éviter

N’ajoutez pas de marge sur chaque enfant pour créer un espace : un seul gap sur le parent suffit.
Ne remplacez pas les sauts de ligne par des marges pour du texte qui forme plusieurs paragraphes.

Accessibilité

Les cibles tactiles (boutons, liens) doivent mesurer au moins 24 par 24 pixels et rester espacées : laissez au moins gap-2 entre deux boutons.
Un espacement trop serré gêne la lecture des personnes dyslexiques ; gardez au moins mb-3 entre paragraphes.