AccueilOutils de DesignGénérateur d'Échelle d'Espacement

Générateur d'Échelle d'Espacement

Le générateur d’échelle d’espacement construit un système d’espacement à partir d’une unité de base de 4, 5, 6 ou 8 px en 12, 16 ou 20 étapes, et l’exporte en propriétés personnalisées CSS en px ou en rem.

À propos de cet outil

Le générateur d’échelle d’espacement construit un système d’espacement à partir d’une unité de base de 4, 5, 6 ou 8 px en 12, 16 ou 20 étapes, et l’exporte en propriétés personnalisées CSS en px ou en rem.

Mode d’emploi

  1. Choisissez une unité de base, par exemple 4 px ou 8 px.
  2. Choisissez une sortie en px ou en rem.
  3. Choisissez le nombre d’étapes nécessaires.
  4. Cliquez sur Copier les variables CSS pour ajouter l’échelle à votre feuille de style.

Bon à savoir

  • Les espacements de Tailwind CSS reposent sur une unité de 4 px (0.25 rem).
  • Material Design utilise une grille de 8 dp, avec 4 dp pour les petits ajustements.
  • Des multiples comme 0.5, 1, 1.5, 2, 3, 4, 6 et 8 couvrent la plupart des besoins d’espacement.
  • Les valeurs rem supposent ici une taille de police racine de 16 px.
  • Une échelle fixe remplace les valeurs en pixels arbitraires et garde des mises en page visuellement cohérentes.

Fonctionne entièrement dans votre navigateur : rien de ce que vous saisissez n’est envoyé ni stocké.

Questions fréquentes

Faut-il un système d’espacement en 4px ou en 8px ?

8 px est une valeur par défaut courante pour les mises en page ; 4 px offre un contrôle plus fin pour les interfaces denses et les petits composants. Beaucoup d’équipes utilisent des pas de 4 px au sein d’un rythme de 8 px.

Qu’est-ce qu’une échelle d’espacement dans un design system ?

Un ensemble prédéfini de valeurs d’espacement utilisées pour les marges, le padding et les gaps, afin que chaque écran utilise les mêmes incréments.

Comment utiliser l’échelle en CSS ?

Copiez les variables et utilisez-les par exemple ainsi : padding: var(--space-4); pour garder des espacements cohérents entre les composants.

Est-ce la même chose que les espacements de Tailwind ?

Avec une base de 4 px et une sortie en rem, les valeurs suivent les mêmes multiples que l’échelle d’espacement par défaut de Tailwind.