> ## Documentation Index
> Fetch the complete documentation index at: https://docs.landerlab.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Abstände mit Margin und Padding steuern

> Passen Sie Margin und Padding an, um Abstände zu steuern, die Lesbarkeit zu verbessern und sauber strukturierte Landingpage-Layouts zu gestalten.

Der Bereich Spacing steuert den **Raum um und innerhalb von Elementen**. So erzeugen Sie aufgeräumte Layouts und eine saubere Trennung zwischen Inhalten.

Sie finden ihn im **rechten Panel**, sobald Sie ein Element auswählen.

***

## Wo Sie es finden

1. Wählen Sie ein Element auf der Arbeitsfläche aus
2. Öffnen Sie das **rechte Panel**
3. Scrollen Sie zum Bereich **Spacing**

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/spacing.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=2de2e4ae08c84d93f1d5f5ca557c81cd" alt="Spacing" width="1306" height="988" data-path="images/spacing.png" />
</Frame>

***

## Margin und Padding im Vergleich

### Margin (Außenabstand)

* Steuert den Raum **außerhalb** des Elements
* Schiebt das Element von anderen Elementen weg

### Padding (Innenabstand)

* Steuert den Raum **innerhalb** des Elements
* Erzeugt Abstand zwischen dem Inhalt und den Kanten des Elements

***

## So passen Sie Abstände an

Sie steuern die Abstände für jede Seite:

* Oben
* Unten
* Links
* Rechts

Jede Seite lässt sich unabhängig anpassen.

***

## Schnellsteuerung

### + / – Schaltflächen

* Erhöhen oder verringern den Abstand in **5-px-Schritten**
* Schneller Weg zur Feinabstimmung des Layouts

### Manuelle Eingabe

* Klicken Sie auf einen Wert, um eine eigene Zahl einzugeben
* Sie können auch Schnellvorgaben wählen, etwa:
  * 0
  * 10
  * 20
  * 40
  * 60
  * 100
  * 140

### Auto-Option

* Überlässt dem System die automatische Steuerung der Abstände (hauptsächlich für die Ausrichtung genutzt)

<Frame>
  <img src="https://mintcdn.com/landerlab-babdc23f/OxODOtVy1KOg0VAr/images/Screenshot2026-03-25at10.25.43AM.png?fit=max&auto=format&n=OxODOtVy1KOg0VAr&q=85&s=2b3771da97501a466738d7952afc4702" alt="Screenshot 2026 03 25 At 10 25 43 AM" width="342" height="350" data-path="images/Screenshot2026-03-25at10.25.43AM.png" />
</Frame>

***

## So funktioniert es (Beispiel)

* Margin Top → `20px`<br />👉 Fügt oberhalb des Elements Abstand hinzu
* Padding Left → `10px`<br />👉 Schiebt den Inhalt im Inneren von der linken Kante weg

***

## Bewährte Vorgehensweisen

* Nutzen Sie **Margin**, um Elemente voneinander zu trennen
* Nutzen Sie **Padding**, um die Lesbarkeit innerhalb von Elementen zu verbessern
* Vermeiden Sie zu große Abstände – halten Sie Layouts ausgewogen
* Nutzen Sie + / – für schnelle Anpassungen, statt Werte zu raten