⚡Design

Spacing System einrichten

Konsistente Abstaende machen den Unterschied

Der groesste Unterschied zwischen Amateur- und Profi-Design sind die Abstaende. Ein Spacing System gibt dir feste Werte die immer zusammenpassen. Kein Raten mehr ob es 12px oder 14px sein sollen.

Pro-Tip — Der schnelle Weg
Nutz die 8er-Regel: alle Abstaende sind Vielfache von 8px. Das ist der Standard bei Google Material Design und fuehrt automatisch zu harmonischen Layouts.
Seite 1
1

Spacing Scale definieren

Tailwind hat bereits eine durchdachte Spacing Scale. Lerne die wichtigsten Werte auswendig: 1 ist 4px, 2 ist 8px, 4 ist 16px, 8 ist 32px, 16 ist 64px.

/* Tailwind Spacing (Auswahl) */
p-1 = 4px p-2 = 8px
p-3 = 12px p-4 = 16px
p-6 = 24px p-8 = 32px
p-12 = 48px p-16 = 64px
2

Komponenten-Innenabstand

Buttons bekommen px-4 py-2. Cards bekommen p-6. Modale bekommen p-8. Diese Werte sind dein Standard und du weichst nur mit gutem Grund davon ab.

<button className="px-4 py-2 rounded-lg">Button</button>
<div className="p-6 rounded-xl border">Card</div>
<div className="p-8">Modal Content</div>
3

Abstaende zwischen Elementen

Nutz gap statt margin fuer Abstaende zwischen Elementen. Gap funktioniert mit Flex und Grid und ist einfacher zu managen als individuelle Margins.

<div className="flex flex-col gap-4">
 <Card />
 <Card />
 <Card />
</div>


<div className="grid grid-cols-3 gap-6">
 <Card />
 <Card />
 <Card />
</div>
4

Sektions-Abstaende

Zwischen grossen Sektionen nutze py-16 oder py-24. Das gibt dem Content Raum zum Atmen. Auf Mobile reduziere auf py-12 oder py-16.

<section className="py-16 md:py-24">
 <div className="container mx-auto px-4 md:px-6">
 <h2 className="mb-8">Sektion Titel</h2>
 <div className="grid gap-8">...</div>
 </div>
</section>
Seite 2
Warum das funktioniert
  • Feste Spacing-Werte eliminieren Design-Entscheidungen
  • Konsistente Abstaende wirken automatisch professionell
  • Tailwind Spacing Scale ist bereits von Design-Experten optimiert
  • Weniger Entscheidungen bedeutet schnellere Entwicklung
Tipps
  • Im Zweifel mehr Whitespace als weniger
  • gap ist besser als margin weil es keine doppelten Abstaende gibt
  • Nutze space-y als Alternative zu gap bei einfachen Listen
  • Konsistente Abstaende sind wichtiger als die exakte Pixelzahl
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen