Classes utilitaires pour contrôler les marges, les paddings et les gouttières. Chaque propriété est déclinable par direction, axe logique ou raccourci global. Toutes les classes disposent d'un équivalent responsive par breakpoint.
.p-1.p-2.p-3.p-4.p-5.p-6Toutes les classes de spacing partagent la même échelle de valeurs.
| CLÉ | VALEUR |
|---|---|
0 |
0 |
1 |
0.5rem |
2 |
1rem |
3 |
1.5rem |
4 |
2rem |
5 |
2.5rem |
6 |
3rem |
7 |
4rem |
8 |
5rem |
9 |
6rem |
auto |
auto — margin uniquement |
La valeur auto est disponible uniquement pour les classes
margin (m-auto,
mx-auto…).
Elle est exclue des classes padding et
gap.
Préfixe m. Disponible pour toutes les valeurs de l'échelle,
y compris auto.
| CLASSE | PROPRIÉTÉ APPLIQUÉE |
|---|---|
.m-{n} |
margin |
.mt-{n} |
margin-top |
.mb-{n} |
margin-bottom |
.ml-{n} |
margin-left |
.mr-{n} |
margin-right |
.ms-{n} |
margin-inline-start |
.me-{n} |
margin-inline-end |
.mx-{n} |
margin-inline (gauche + droite) |
.my-{n} |
margin-block (haut + bas) |
Préfixe p. Disponible pour toutes les valeurs de l'échelle,
à l'exception de auto.
| CLASSE | PROPRIÉTÉ APPLIQUÉE |
|---|---|
.p-{n} |
padding |
.pt-{n} |
padding-top |
.pb-{n} |
padding-bottom |
.pl-{n} |
padding-left |
.pr-{n} |
padding-right |
.ps-{n} |
padding-inline-start |
.pe-{n} |
padding-inline-end |
.px-{n} |
padding-inline (gauche + droite) |
.py-{n} |
padding-block (haut + bas) |
Classes utilitaires pour la propriété gap, utilisée dans les contextes
flex et grid.
La valeur auto est exclue.
| CLASSE | PROPRIÉTÉ APPLIQUÉE |
|---|---|
.gap-0 |
gap: 0 |
.gap-1 |
gap: 0.5rem |
.gap-2 |
gap: 1rem |
.gap-3 |
gap: 1.5rem |
.gap-4 |
gap: 2rem |
.gap-5 |
gap: 2.5rem |
.gap-6 |
gap: 3rem |
.gap-7 |
gap: 4rem |
.gap-8 |
gap: 5rem |
.gap-9 |
gap: 6rem |
Toutes les classes de margin, padding et gap disposent d'un équivalent responsive suffixé par le nom du breakpoint.
La classe s'applique à partir du breakpoint spécifié (min-width).
Les suffixes disponibles correspondent aux clés définies dans
$breakpoints de
abstracts/breakpoints.
Chaque suffixe génère une règle @media (min-width: ...) dédiée.
La valeur auto est disponible en responsive pour
margin uniquement.
Utiliser .mx-auto pour centrer horizontalement
un élément de largeur fixe dans son conteneur, en combinaison avec une classe
.w-*.
Préférer les axes logiques .ms-* /
.me-* à
.ml-* /
.mr-* pour les interfaces multilingues
(support RTL via margin-inline-start/end).
Ne pas utiliser .p-auto : la valeur
auto est exclue du padding et du gap.
Elle n'existe que pour les classes margin.
Spacing · WEBDEV-UI DOCS / V1