Espacement

Principe directeur : Faire preuve de cohérence

À propos de cette composante

L’espacement est la distance séparant les éléments sur une page.

Nous employons deux types d’espacement :

• le remplissage est la quantité d’espace excédentaire que comportera un élément;
• les marges correspondent à la quantité d’espace excédentaire qui entourera un élément.

L’espacement est intégré aux composantes

Nous avons donné à chaque élément du système de conception une valeur par défaut pour le remplissage et les marges, qui fonctionne dans notre grille d’espacement à 8 pixels et devrait, en règle générale, fonctionner sans modification, quelle que soit la page ou la disposition.

Un élément compte habituellement une marge inférieure de 40 px, par défaut. Les étiquettes auront une marge inférieure de 16 px afin d’être étroitement liées à l’élément de formulaire qui y est associé. Consultez l’exemple ci-dessous :

Exemple

---

Catégories de contournements

Si l’espacement par défaut pour un élément donné s’intègre mal à votre conception, vous pouvez utiliser des catégories de contournements pour le personnaliser.

Recourez à des catégories de contournements pour ajouter séparément un remplissage et des marges de tout côté d’un élément.

Utilisez les catégories de contournements pour l’espacement seulement si la valeur de celui entourant un élément pose un problème dans votre conception.

Directives pour les catégories de contournements

Alignez de préférence votre espacement sur une grille à 8 pixels – ce qui signifie que la quantité totale des espacements est un multiple de 8 pixels.

Si une grille à 8 pixels ne fonctionne pas, vous pouvez utiliser une grille à 4 pixels – peut-être lorsque vous devez aligner icônes.

En règle générale, ajoutez de l’espace dans la partie inférieure des éléments, pas dans la partie supérieure. Ainsi, ils défileront mieux sur les écrans de différentes tailles.

Il existe différentes catégories de remplissage et de marges. Utilisez les catégories de contournements en respectant les indications du graphique suivant.

Remplissage

Dans la mesure du possible, utiliser des variables d’espacement qui sont des multiples de 8. Elles sont préférables aux multiples de 4.

Margins