# Block Innen-Abstände

## Innen-Abstände (Gutters)

[Gutters](https://getbootstrap.com/docs/5.1/layout/gutters/) sind die Innenabstände zwischen den Blöcken, die verwendet werden, um Elemente in den Erlebniswelten zu platzieren und auszurichten.

Über das Feld **Innerer Abstand (1)** lässt sich ein **innerer Abstand (2, 3)** zwischen den einzelnen Blöcken in einem Layout oder Spalten Grid definieren.

{% hint style="info" %}
Diese Einstellung findest Du exklusiv nur bei Zenit Spalten- und Layout Elementen.
{% endhint %}

<figure><img src="https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2Fql1ZQhWHJigRVtV8Nc2G%2Fdocs-de-config-shopping-experiences-block-spacings-field.png?alt=media&#x26;token=8d0167a7-932d-4db9-887e-efc0e01d0bfb" alt=""><figcaption></figcaption></figure>

## Erweiterte Innen-Abstände (Gutters)

[Gutters](https://getbootstrap.com/docs/5.1/layout/gutters/) sind die Innenabstände zwischen den Blöcken, die verwendet werden, um Elemente in den Erlebniswelten zu platzieren und auszurichten.

Die Abstandseinstellungen im Layout gelten in der Regel für alle Endgeräte. Um diese Abstände  **responsiv** einzustellen - also für verschiedene Geräte vom Smartphone bis zum Desktop-Gerät, gibt es spezielle Klassen. Verwende dazu **breakpoint-spezifische** Klassen, um horizontale Abstände, vertikale Abstände oder alle Abstände zu ändern.

{% hint style="info" %}
Dazu sollte das Feld **Innerer Abstand** keinen Wert enthalten.
{% endhint %}

{% hint style="success" %}
Eine vollständige Liste aller Klassen findest Du weiter unten. Du kannst sie Dir aber auch nach folgendem Schema herleiten:\
`.zen-cms-g{Achse}-{Viewport}-{Größe}`

Beispiel: `zen-cms-gx-sm-1` = horizontaler Abstand ab SM Endgeräten in der Größe 1
{% endhint %}

### Anwendung in der Administration

![](https://2797716245-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FglpRTGDOwN11YxqfJhAM%2Fuploads%2FwN48xoocXAgM2uULbNH3%2Fdocs-de-config-shopping-experiences-block-spacings-classes.png?alt=media\&token=6be03967-5597-4eb5-a222-193ee82bc253)

Wähle den **Block (3)** aus, welcher die CSS-Klasse für die Abstandseinstellung erhalten soll und trage eine oder mehrere CSS-Klassennamen in das Feld **CSS-Klassen (4)**.

{% hint style="warning" %}
Die Klassennamen werden **ohne Punkt**-Notation eingetragen. Mehrere CSS-Klassennamen werden durch Leerzeichen voneinander getrennt eingetragen.
{% endhint %}

### Horizontale Abstände (x-Achse)

`.zen-cms-gx-*` Klassen können genutzt werden, um horizontale Abstände einzustellen.

{% tabs %}
{% tab title="Alle" %}

| CSS-Klasse      | Horizontaler Abstand |
| --------------- | -------------------- |
| .`zen-cms-gx-0` | 0                    |
| .`zen-cms-gx-1` | XS                   |
| .`zen-cms-gx-2` | SM                   |
| .`zen-cms-gx-3` | MD                   |
| .`zen-cms-gx-4` | LG                   |
| .`zen-cms-gx-5` | XL                   |
| {% endtab %}    |                      |

{% tab title="SM" %}
SM Viewports (ab 576px)

| CSS-Klasse         | Horizontaler Abstand |
| ------------------ | -------------------- |
| .`zen-cms-gx-sm-0` | 0                    |
| .`zen-cms-gx-sm-1` | XS                   |
| .`zen-cms-gx-sm-2` | SM                   |
| .`zen-cms-gx-sm-3` | MD                   |
| .`zen-cms-gx-sm-4` | LG                   |
| .`zen-cms-gx-sm-5` | XL                   |
| {% endtab %}       |                      |

{% tab title="MD" %}
MD Viewports (ab 768px)

| CSS-Klasse         | Horizontaler Abstand |
| ------------------ | -------------------- |
| .`zen-cms-gx-md-0` | 0                    |
| .`zen-cms-gx-md-1` | XS                   |
| .`zen-cms-gx-md-2` | SM                   |
| .`zen-cms-gx-md-3` | MD                   |
| .`zen-cms-gx-md-4` | LG                   |
| .`zen-cms-gx-md-5` | XL                   |
| {% endtab %}       |                      |

{% tab title="LG" %}
LG Viewports (ab 992px)

| CSS-Klasse         | Horizontaler Abstand |
| ------------------ | -------------------- |
| .`zen-cms-gx-lg-0` | 0                    |
| .`zen-cms-gx-lg-1` | XS                   |
| .`zen-cms-gx-lg-2` | SM                   |
| .`zen-cms-gx-lg-3` | MD                   |
| .`zen-cms-gx-lg-4` | LG                   |
| .`zen-cms-gx-lg-5` | XL                   |
| {% endtab %}       |                      |

{% tab title="XL" %}
XL Viewports (ab 1200px)

| CSS-Klasse         | Horizontaler Abstand |
| ------------------ | -------------------- |
| .`zen-cms-gx-xl-0` | 0                    |
| .`zen-cms-gx-xl-1` | XS                   |
| .`zen-cms-gx-xl-2` | SM                   |
| .`zen-cms-gx-xl-3` | MD                   |
| .`zen-cms-gx-xl-4` | LG                   |
| .`zen-cms-gx-xl-5` | XL                   |
| {% endtab %}       |                      |
| {% endtabs %}      |                      |

Beispiel:

{% embed url="<https://codepen.io/zenitdesign/pen/rNJBvzZ>" %}
zen-cms-gx-5
{% endembed %}

### Vertikale Abstände (y-Achse)

`.zen-cms-gy-*` Klassen können genutzt werden, um vertikale Abstände einzustellen.

{% tabs %}
{% tab title="Alle" %}

| CSS-Klasse      | Vertikaler Abstand |
| --------------- | ------------------ |
| .`zen-cms-gy-0` | 0                  |
| .`zen-cms-gy-1` | XS                 |
| .`zen-cms-gy-2` | SM                 |
| .`zen-cms-gy-3` | MD                 |
| .`zen-cms-gy-4` | LG                 |
| .`zen-cms-gy-5` | XL                 |
| {% endtab %}    |                    |

{% tab title="SM" %}
SM Viewports (ab 576px)

| CSS-Klasse         | Horizontaler Abstand |
| ------------------ | -------------------- |
| .`zen-cms-gy-sm-0` | 0                    |
| .`zen-cms-gy-sm-1` | XS                   |
| .`zen-cms-gy-sm-2` | SM                   |
| .`zen-cms-gy-sm-3` | MD                   |
| .`zen-cms-gy-sm-4` | LG                   |
| .`zen-cms-gy-sm-5` | XL                   |
| {% endtab %}       |                      |

{% tab title="MD" %}
MD Viewports (ab 768px)

| CSS-Klasse         | Horizontaler Abstand |
| ------------------ | -------------------- |
| .`zen-cms-gy-md-0` | 0                    |
| .`zen-cms-gy-md-1` | XS                   |
| .`zen-cms-gy-md-2` | SM                   |
| .`zen-cms-gy-md-3` | MD                   |
| .`zen-cms-gy-md-4` | LG                   |
| .`zen-cms-gy-md-5` | XL                   |
| {% endtab %}       |                      |

{% tab title="LG" %}
LG Viewports (ab 992px)

| CSS-Klasse         | Horizontaler Abstand |
| ------------------ | -------------------- |
| .`zen-cms-gy-lg-0` | 0                    |
| .`zen-cms-gy-lg-1` | XS                   |
| .`zen-cms-gy-lg-2` | SM                   |
| .`zen-cms-gy-lg-3` | MD                   |
| .`zen-cms-gy-lg-4` | LG                   |
| .`zen-cms-gy-lg-5` | XL                   |
| {% endtab %}       |                      |

{% tab title="XL" %}
XL Viewports (ab 1200px)

| CSS-Klasse         | Horizontaler Abstand |
| ------------------ | -------------------- |
| .`zen-cms-gy-xl-0` | 0                    |
| .`zen-cms-gy-xl-1` | XS                   |
| .`zen-cms-gy-xl-2` | SM                   |
| .`zen-cms-gy-xl-3` | MD                   |
| .`zen-cms-gy-xl-4` | LG                   |
| .`zen-cms-gy-xl-5` | XL                   |
| {% endtab %}       |                      |
| {% endtabs %}      |                      |

Beispiel:

{% embed url="<https://codepen.io/zenitdesign/pen/OJQLEpv>" %}

### Horizontale & Vertikale Abstände

`.zen-cms-g-*` Klassen können genutzt werden, um horizontale und vertikale Abstände gleichzeitig einzustellen.

{% tabs %}
{% tab title="Alle" %}

| CSS-Klasse     | Horizontaler & Vertikaler Abstand |
| -------------- | --------------------------------- |
| .`zen-cms-g-0` | 0                                 |
| .`zen-cms-g-1` | XS                                |
| .`zen-cms-g-2` | SM                                |
| .`zen-cms-g-3` | MD                                |
| .`zen-cms-g-4` | LG                                |
| .`zen-cms-g-5` | XL                                |
| {% endtab %}   |                                   |

{% tab title="SM" %}
SM Viewports (ab 576px)

| CSS-Klasse        | Horizontaler & Vertikaler Abstand |
| ----------------- | --------------------------------- |
| .`zen-cms-g-sm-0` | 0                                 |
| .`zen-cms-g-sm-1` | XS                                |
| .`zen-cms-g-sm-2` | SM                                |
| .`zen-cms-g-sm-3` | MD                                |
| .`zen-cms-g-sm-4` | LG                                |
| .`zen-cms-g-sm-5` | XL                                |
| {% endtab %}      |                                   |

{% tab title="MD" %}
MD Viewports (ab 768px)

| CSS-Klasse        | Horizontaler & Vertikaler Abstand |
| ----------------- | --------------------------------- |
| .`zen-cms-g-md-0` | 0                                 |
| .`zen-cms-g-md-1` | XS                                |
| .`zen-cms-g-md-2` | SM                                |
| .`zen-cms-g-md-3` | MD                                |
| .`zen-cms-g-md-4` | LG                                |
| .`zen-cms-g-md-5` | XL                                |
| {% endtab %}      |                                   |

{% tab title="LG" %}
LG Viewports (ab 992px)

| CSS-Klasse        | Horizontaler & Vertikaler Abstand |
| ----------------- | --------------------------------- |
| .`zen-cms-g-lg-0` | 0                                 |
| .`zen-cms-g-lg-1` | XS                                |
| .`zen-cms-g-lg-2` | SM                                |
| .`zen-cms-g-lg-3` | MD                                |
| .`zen-cms-g-lg-4` | LG                                |
| .`zen-cms-g-lg-5` | XL                                |
| {% endtab %}      |                                   |

{% tab title="XL" %}
XL Viewports (ab 1200px)

| CSS-Klasse        | Horizontaler & Vertikaler Abstand |
| ----------------- | --------------------------------- |
| .`zen-cms-g-xl-0` | 0                                 |
| .`zen-cms-g-xl-1` | XS                                |
| .`zen-cms-g-xl-2` | SM                                |
| .`zen-cms-g-xl-3` | MD                                |
| .`zen-cms-g-xl-4` | LG                                |
| .`zen-cms-g-xl-5` | XL                                |
| {% endtab %}      |                                   |
| {% endtabs %}     |                                   |

Beispiel:

{% embed url="<https://codepen.io/zenitdesign/pen/dydbKZv>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://themedocs.zenit.design/content/erlebniswelten/block-innen-abstaende.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.