> For the complete documentation index, see [llms.txt](https://themedocs.zenit.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://themedocs.zenit.design/content/erlebniswelten/block-innen-abstaende.md).

# 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="/files/Y6QIBPammkiefPizVUrf" 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

![](/files/HtSD0Wsipa1pHBDmiTSx)

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>" %}