Abstands-Skala-Generator Erstellen Sie ein konsistentes Abstandsskalensystem mit anpassbarem Basiswert und Multiplikatoren.

🎨

Abstands-Skala-Generator

Erstellen Sie ein konsistentes Abstandsskalensystem mit anpassbarem Basiswert und Multiplikatoren.

Basis-Einheit festlegen

Wählen Sie den Basisabstandswert in Pixel (üblicherweise 4px oder 8px).

Ausgabeeinheit wählen

Wählen Sie px oder rem für die generierten Abstandswerte.

CSS-Variablen kopieren

Vorschau der visuellen Skala und Kopie der CSS-Benutzeroberflächen.

Loading tool...

What Is Abstands-Skala-Generator?

Der Spacing-Scale-Generator erstellt ein konsistentes Abstandssystem für das Webdesign, indem eine Basis-Einheit mit einer vordefinierten Reihe von Faktoren multipliziert wird. Ein konsistenter Abstand ist entscheidend für professionelle, harmonische Designs - ohne ihn wirken Layouts inkonsistent und unvollendet. Dieses Tool verwendet eine Basis-Einheit (typischerweise 4px oder 8px), die mit Faktoren (0, 0,5, 1, 1,5, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20, 24) multipliziert wird, um eine umfassende Abstandsskala zu generieren. Die visuelle Vorschau zeigt jeden Abstandswert als farbige Balken an, was es leicht macht, die relativen Unterschiede zu erkennen. Die Ausgabe ist ein Satz von CSS-Custom-Eigenschaften (--space-0 bis --space-24) in px oder rem, bereit für die Verwendung als Margin-, Padding-, Gap- und andere Abstandswerte in Ihrem Stylesheet.

Why Use Abstands-Skala-Generator?

Basis-Einheit-System für mathematisch konsistente Abstände
Visuelle Balken-Diagramm-Anzeige relativer Abstandsunterschiede
CSS-Benutzeroberflächen-Ausgabe für die Integration in ein Designsystem
Unterstützt sowohl px als auch rem Ausgabeeinheiten

Common Use Cases

Design-System-Tokens

Generieren von Abstandstoken als Grundlage eines Designsystems.

Komponenten-Bibliothek-Abstände

Sicherstellen konsistenter Abstände in allen Komponenten einer Bibliothek.

Neue Projekt-Einrichtung

Einrichten eines Abstandssystems beim Start neuer Webprojekte.

Team-Abstimmung

Teilen einer standardisierten Abstandsskala über Design- und Entwicklerteams hinweg.

Technical Guide

Eine Abstandsskala verwendet eine Basis-Einheit, die mit einer Reihe von Faktoren multipliziert wird, um konsistente, proportionale Abstandswerte zu erstellen. Die häufigsten Basis-Einheiten sind 4px (verwendet von Tailwind CSS und Material Design) und 8px (verwendet von vielen Designsprachen). Eine 4px-Basis bietet eine feine Kontrolle: 4, 8, 12, 16, 20, 24, 32, 40 usw. Eine 8px-Basis erzeugt größere Sprünge: 8, 16, 24, 32, 40, 48 usw. CSS-Custom-Eigenschaften (Variablen) speichern die Werte für die Wiederverwendung: --space-1: 0,25rem. Diese können in Margin-, Padding-, Gap- und anderen Abstandseigenschaften verwendet werden. Die Verwendung von rem-Einheiten stellt sicher, dass der Abstand mit der Root-Schriftgröße skaliert wird und somit die Proportionen beibehält, wenn Benutzer die Textgröße ändern. Der Halbschritt (0,5x) bietet einen kleineren Inkrement für feine Anpassungen. Große Multiplikatoren (16x, 20x, 24x) behandeln den Abstand zwischen Abschnitten und große Layoutlücken.

Tips & Best Practices

1
Verwenden Sie eine Basis von 4px für feine Kontrolle, 8px für einfacheren Maßstab
2
Anwenden von rem-Einheiten für zugängliche, skalierbare Abstände
3
Verwenden von CSS-Benutzeroberflächen für einfache globale Abstands-Anpassungen
4
Bleiben Sie bei den Skalawerten - vermeiden Sie willkürliche Abstände für Konsistenz

Related Tools

CSS-Grid-Spielplatz

Visueller CSS-Grid-Builder mit interaktiven Steuerungen für Template-Spalten, -zeilen und Lücken.

🎨 CSS & Design

Tailwind-Konfigurationsgenerator

Erstellen Sie Tailwind CSS-Konfigurationsdateien mit benutzerdefinierten Farben, Schriftarten und Brechpunkten.

🎨 CSS & Design

Typographieskalen-Generator

Erstellen Sie eine modulare Typographieskala mit anpassbarer Basisgröße, Verhältnis und Einheiten.

🎨 CSS & Design

CSS-Variable-Generator

Erstellen Sie benutzerdefinierte CSS-Eigenschaften (Variablen) für Farben, Abstände und Typografie.

🎨 CSS & Design

Frequently Asked Questions

Q Welche Basisgröße sollte ich verwenden?

4px ist am beliebtesten (wird von Tailwind verwendet). 8px bietet einen einfacheren, restriktiveren Maßstab.

Q Sollte ich px oder rem verwenden?

rem wird bevorzugt für die Zugänglichkeit, da es sich an die Benutzervorlieben für die Schriftgröße anpasst.

Q Warum sollte ich keine willkürlichen Abstandswerte verwenden?

Eine konsistente Skala schafft visuelle Harmonie und macht Designs polierter und professioneller aus.

Q Wie verwende ich diese Abstandswerte?

Verwenden Sie die CSS-Benutzeroberflächen für Margin, Padding, Gap: margin: var(--space-4);

Q Kann ich den Multiplikator-Satz ändern?

Der Standard-Satz deckt die meisten Bedürfnisse ab, aber Sie können Multiplikatoren hinzufügen oder entfernen, indem Sie die generierte CSS bearbeiten.

About This Tool

Abstands-Skala-Generator 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.