Abstände
Der Baukasten bietet die Möglichkeit mit Abständen ein ansprechendes Design zu erstellen. Dabei unterscheidet man zwischen Innenabstand (Padding) und Außenabstand (Margin).
1. Innenabstand (Padding)
- Der Innenabstand ist der Raum zwischen dem Inhalt eines Elements (z. B. Text, Bild) und seinem Rahmen.
- Padding kann dafür sorgen, dass der Inhalt nicht direkt am Rand klebt und verbessert so die Lesbarkeit und Ästhetik.
2. Außenabstand (Margin)
- Der Außenabstand ist der Raum, der ein Element von anderen Elementen oder dem Seitenrand trennt.
- Margin kann verwendet werden, um Layoutbereiche klar voneinander abzugrenzen und Elemente optisch zu gruppieren.
Abstandsfaktoren
Ein hilfreiches Feature ist die Möglichkeit, Abstände prozentuale für verschiedene Bildschirmgrößen zu verkleiner oder vergrößern. Dadurch können Sie sicherstellen, dass Ihre Website auf Breitbild-, Desktop-, Tablet- und Mobilgeräten optimal aussieht.
Wie funktioniert die Anpassung?
Zunächst legen Sie die Abstände fest, zum Beispiel 50 px oben und unten sowie 80 px links und rechts. Auf Mobilgeräten kann das jedoch zu groß wirken, da der Bildschirm deutlich schmaler ist. Um dies anzupassen, können Sie den Abstandsfaktor für Mobilgeräte beispielsweise auf 50 % reduzieren. Dadurch halbieren sich die Abstände automatisch: 25 px oben und unten sowie 40 px links und rechts, wodurch die Gestaltung besser an die kleineren Bildschirme angepasst wird.