Layouteinstellungen

Breite

Kann geringfuegig von der tatsaechlichen Oberflaeche abweichen.

Kernpunkt:
Steuert die horizontale Ausdehnung des Knopfs.

Auswirkung:
Besonders wichtig bei variabler Textlänge.

Praxis-Tipp:
Erst min-width setzen, danach width und max-width feinjustieren.

Einstellungen

• Breite verwenden
• Breite + Einheit (px / % / vw / vh / fit-content)
• Mindestbreite verwenden / Min Breite
• Maximale Breite verwenden / Max Breite
• Responsiv

fit-content passt die Breite automatisch an den Text an.

Höhe

Kann geringfuegig von der tatsaechlichen Oberflaeche abweichen.

Kernpunkt:
Definiert die vertikale Dichte und Tap-Fläche.

Auswirkung:
Zu klein wirkt gedrängt, zu groß wirkt aufgebläht.

Praxis-Tipp:
min-height priorisieren; feste Höhe nur bei klarem Bedarf.

Einstellungen

• Höhe verwenden
• Höhe + Einheit
• Mindesthöhe verwenden / Min Höhe
• Maximale Höhe verwenden / Max Höhe
• Responsiv

Für Touch-Ziele sind mindestens 44px empfehlenswert.

Margin

Kann geringfuegig von der tatsaechlichen Oberflaeche abweichen.

Kernpunkt:
Regelt Außenabstände zu Nachbarelementen.

Auswirkung:
Verbessert visuelle Gruppierung und Lesefluss.

Praxis-Tipp:
Erst vertikale Rhythmik definieren, dann auf alle CTA-Blöcke übertragen.

Einstellungen

• Individuelle Einstellungen verwenden
• Einheitlich: Margin + Einheit
• Einzelwerte: Oben / Rechts / Unten / Links
• Responsiv

Padding

Kann geringfuegig von der tatsaechlichen Oberflaeche abweichen.

Kernpunkt:
Regelt den Innenabstand von Text/Icon zum Rahmen.

Auswirkung:
Beeinflusst Lesbarkeit und Klickkomfort direkt.

Praxis-Tipp:
Auf Mobile vertikal eher großzügiger setzen.

Einstellungen

• Individuelle Einstellungen verwenden
• Einheitlich: Padding + Einheit
• Einzelwerte: Oben / Rechts / Unten / Links
• Responsiv

Position

Kann geringfuegig von der tatsaechlichen Oberflaeche abweichen.

Kernpunkt:
Bestimmt Platzierung im Layout und Überlagerungen.

Auswirkung:
Fehlerhafte Positionierung kann schnell zu Layoutbrüchen führen.

Praxis-Tipp:
Standardmäßig relative, absolute nur gezielt einsetzen.

Einstellungen

• Positionstyp (relative / absolute)
• Oben / Rechts / Unten / Links
• Z-Index
• Transformation Translate X / Y
• Responsiv

Bei absolute orientiert sich das Element am nächsten relativ positionierten Eltern-Element.

Layer-Reihenfolge

Kann geringfuegig von der tatsaechlichen Oberflaeche abweichen.

Kernpunkt:
Legt die Vorder-/Hintergrund-Reihenfolge der Ebenen fest.

Auswirkung:
Löst Probleme mit verdeckten Texten oder überdeckenden Deko-Elementen.

Praxis-Tipp:
Inhalt immer vorn halten, dekorative Ebenen dahinter.

Einstellungen

• Inhalt
• Thumbnail
• Band
• Hintergrund

Standardwerte sind Hintergrund: 0, Band: 5, Thumbnail: 10, Inhalt: 20.