Skip to main content
FreeToolkit .ai

Générateur d'échelle d'espacement Générer un système d'échelle d'espacement cohérent avec une unité de base personnalisable et des multiplicateurs.

Générateur d'échelle d'espacement illustration
🎨

Générateur d'échelle d'espacement

Générer un système d'échelle d'espacement cohérent avec une unité de base personnalisable et des multiplicateurs.

1

Définir l'unité de base

Choisissez la valeur d'espacement de base en pixels (généralement 4px ou 8px).

2

Choisir l'unité de sortie

Sélectionnez px ou rem pour les valeurs d'espacement générées.

3

Copier les variables CSS

Prévisualisez la échelle visuelle et copiez les propriétés personnalisées CSS.

Loading tool...

What Is Générateur d'échelle d'espacement?

Le générateur d'échelle d'espacement crée un système d'espacement cohérent pour la conception Web en utilisant une unité de base multipliée par un ensemble prédéfini de facteurs. Un espacement cohérent est crucial pour des designs professionnels et harmonieux - sans cela, les dispositions paraissent incohérentes et peu polies. Cet outil utilise une unité de base (généralement 4px ou 8px) multipliée par des facteurs (0, 0,5, 1, 1,5, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24) pour générer une échelle d'espacement complète. L'aperçu visuel montre chaque valeur d'espacement sous forme de barre colorée, ce qui facilite la visualisation des différences relatives. La sortie est un ensemble de propriétés personnalisées CSS (--space-0 à --space-24) en px ou rem, prêtes à être utilisées comme valeurs d'espacement pour les marges, les remplissages, les intervalles et autres dans votre feuille de style.

Why Use Générateur d'échelle d'espacement?

  • Système d'unités de base pour un espacement mathématiquement cohérent
  • Graphique à barres visuel montrant les différences relatives d'espacement
  • Sortie des propriétés personnalisées CSS pour l'intégration du système de design
  • Prend en charge les unités de sortie px et rem

Common Use Cases

Jetons de système de design

Générez des jetons d'espacement comme base d'un système de design.

Espacement de bibliothèque de composants

Assurez un espacement cohérent dans tous les composants d'une bibliothèque.

Configuration d'un nouveau projet

Établissez un système d'espacement lors du démarrage de nouveaux projets Web.

Alignement d'équipe

Partagez une échelle d'espacement standardisée entre les équipes de design et de développement.

Technical Guide

Une échelle d'espacement utilise une unité de base multipliée par une série de facteurs pour créer des valeurs d'espacement cohérentes et proportionnelles. Les unités de base les plus courantes sont 4px (utilisées par Tailwind CSS et Material Design) et 8px (utilisées par de nombreux systèmes de design). Une unité de base de 4px offre un contrôle fin : 4, 8, 12, 16, 20, 24, 32, 40, etc. Une unité de base de 8px crée des sauts plus importants : 8, 16, 24, 32, 40, 48, etc. Les propriétés personnalisées CSS (variables) stockent les valeurs pour une réutilisation : --space-1: 0,25rem. Celles-ci peuvent être utilisées dans les marges, les remplissages, les intervalles et toute autre propriété d'espacement. L'utilisation d'unités rem garantit que l'espacement est proportionnel à la taille de police racine, en maintenant les proportions lorsque les utilisateurs modifient la taille du texte. La demi-étape (0,5x) fournit un incrément plus petit pour des ajustements fins. Les multiplicateurs importants (16x, 20x, 24x) gèrent l'espacement des sections et les grands intervalles de disposition.

Tips & Best Practices

  • 1
    Utilisez une base de 4px pour un contrôle fin, 8px pour une échelle plus simple
  • 2
    Appliquez des unités rem pour un espacement accessible et évolutif
  • 3
    Utilisez les propriétés personnalisées CSS pour des ajustements d'espacement globaux faciles
  • 4
    Respectez les valeurs de l'échelle - évitez les espacements arbitraires pour la cohérence

Related Tools

Zone de jeu CSS Grid - free online tool

Zone de jeu CSS Grid

Construteur visuel CSS Grid avec contrôles interactifs pour les colonnes de modèle, les lignes et les espaces.

🎨 CSS & Design
Générateur de configuration Tailwind - free online tool

Générateur de configuration Tailwind

Générer des fichiers de configuration Tailwind CSS avec des couleurs, des polices et des points d'arrêt personnalisés.

🎨 CSS & Design
Générateur d'échelle typographique - free online tool

Générateur d'échelle typographique

Générer une échelle typographique modulaire avec une taille de base, un ratio et des unités personnalisables.

🎨 CSS & Design
Générateur de Variables CSS - free online tool

Générateur de Variables CSS

Générer des propriétés personnalisées CSS (variables) pour les couleurs, les espacements et la typographie.

🎨 CSS & Design

Frequently Asked Questions

Q Quelle taille de base devrais-je utiliser ?
4px est le plus populaire (utilisé par Tailwind). 8px fournit une échelle plus simple et plus restrictive.
Q Devrais-je utiliser px ou rem ?
rem est préféré pour l'accessibilité car il s'adapte aux préférences de taille de police des utilisateurs.
Q Pourquoi ne pas utiliser des valeurs d'espacement arbitraires ?
Une échelle cohérente crée une harmonie visuelle et rend les conceptions plus polies et professionnelles.
Q Comment utilisez-vous ces valeurs d'espacement ?
Utilisez les propriétés personnalisées CSS pour la marge, le remplissage, l'espace entre les éléments : margin: var(--space-4);
Q Puis-je modifier l'ensemble de multiplicateurs ?
L'ensemble standard couvre la plupart des besoins, mais vous pouvez ajouter ou supprimer des multiplicateurs en éditant le CSS généré.

About This Tool

Générateur d'échelle d'espacement is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.