Espacements

Le rythme de mise en page utilise une grille d'espacement stricte à base 4px pour garantir la cohérence d'un écran à l'autre.

Tokens d'espacement

Chaque token correspond à un multiple de 4px. Utilisez toujours les variables CSS — jamais de valeurs arbitraires en dur.

--ml-space-1 (4px)

--ml-space-2 (8px)

--ml-space-3 (12px)

--ml-space-4 (16px)

--ml-space-5 (20px)

--ml-space-6 (24px)

--ml-space-8 (32px)

--ml-space-10 (40px)

--ml-space-12 (48px)

--ml-space-16 (64px)

Classes utilitaires d'espacement

Le DSML fournit des classes utilitaires pour appliquer rapidement des marges et paddings sans écrire de CSS supplémentaire. Elles suivent la convention ml-{propriété}-{valeur}.

Ces classes sont conçues pour un usage ponctuel dans du HTML. Pour des composants récurrents, préférez des classes CSS dédiées dans votre propre feuille de style.

Marges (margin)

Classe	Propriété CSS	Valeurs disponibles
`ml-mt-{n}`	margin-top	0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16
`ml-mb-{n}`	margin-bottom	0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16
`ml-ml-{n}`	margin-left	0, 1, 2, 3, 4, 6, 8
`ml-mr-{n}`	margin-right	0, 1, 2, 3, 4, 6, 8
`ml-mx-auto`	margin-left + right	auto (centrage horizontal)

Paddings

Classe	Propriété CSS	Valeurs disponibles
`ml-pt-{n}`	padding-top	0, 1, 2, 3, 4, 5, 6, 8, 10, 12
`ml-pb-{n}`	padding-bottom	0, 1, 2, 3, 4, 5, 6, 8, 10, 12
`ml-px-{n}`	padding-left + right	0, 3, 4, 6, 8
`ml-py-{n}`	padding-top + bottom	0, 3, 4, 6, 8, 10

Exemples d'utilisation

Dans vos propres feuilles de style, référencez toujours les variables :

CSS

.mon-composant {
  padding: var(--ml-space-4) var(--ml-space-6);
  margin-bottom: var(--ml-space-8);
  gap: var(--ml-space-3);
}

Ou directement dans le HTML via les classes utilitaires pour des ajustements ponctuels :

    
HTML

<!-- Add 32px bottom margin (space-8) -->
<div class="ml-mb-8">...</div>

<!-- Center block with max width -->
<div class="ml-mx-auto" style="max-width: 600px;">...</div>

<!-- Horizontal padding of 24px (space-6) -->
<section class="ml-px-6">...</section>

<!-- Remove top margin on heading -->
<h2 class="ml-title-2 ml-mt-4">Titre rapproché</h2>