> For the complete documentation index, see [llms.txt](https://wiki.themeware.design/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/abstande-in-cms-blocken-anpassen.md).

# Abstände in CMS-Blöcken anpassen

## Gap-Klassen – Abstände in CMS-Blöcken

ThemeWare® bietet dir diverse Gap-Klassen für CMS-Blöcke. In dieser Anleitung stellen wir dir diese CSS-Klassen vor.

> Diese CSS-Klassen stehen dir zur Verfügung, wenn du die folgende Theme-Konfiguration aktivierst:
>
> * Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => CSS-Klassen für Spaltenabstände laden (optional)

***

## **ThemeWare® CSS-Gap-Klassen**

### ThemeWare® CMS Grid-Blöcke

Elemente in CMS Grid-Blöcken haben in Shopware 6 einen fest definierten Abstand von `40px`. Mit ThemeWare® stehen dir verschiedene CSS-Klassen zur Verfügung um diese Abstände ändern zu können.

Mit ThemeWare® 3.2 haben wir folgende CSS-Abstandsklassen für ThemeWare® CMS Grid-Blöcke sowie die Standard Grid-Blöcke von Shopware hinzugefügt.

| CSS-Klasse              | Bereich | Funktionsbeschreibung                          |
| ----------------------- | ------- | ---------------------------------------------- |
| **twt-cms-grid-gap-0**  | Block   | Setzt den Abstand in CMS-Blöcken auf 0 Pixel.  |
| **twt-cms-grid-gap-5**  | Block   | Setzt den Abstand in CMS-Blöcken auf 5 Pixel.  |
| **twt-cms-grid-gap-10** | Block   | Setzt den Abstand in CMS-Blöcken auf 10 Pixel. |
| **twt-cms-grid-gap-15** | Block   | Setzt den Abstand in CMS-Blöcken auf 15 Pixel. |
| **twt-cms-grid-gap-20** | Block   | Setzt den Abstand in CMS-Blöcken auf 20 Pixel. |
| **twt-cms-grid-gap-25** | Block   | Setzt den Abstand in CMS-Blöcken auf 25 Pixel. |
| **twt-cms-grid-gap-30** | Block   | Setzt den Abstand in CMS-Blöcken auf 30 Pixel. |
| **twt-cms-grid-gap-35** | Block   | Setzt den Abstand in CMS-Blöcken auf 35 Pixel. |
| **twt-cms-grid-gap-40** | Block   | Setzt den Abstand in CMS-Blöcken auf 40 Pixel. |
| **twt-cms-grid-gap-45** | Block   | Setzt den Abstand in CMS-Blöcken auf 45 Pixel. |
| **twt-cms-grid-gap-50** | Block   | Setzt den Abstand in CMS-Blöcken auf 50 Pixel. |

{% hint style="info" %}
**Hinweis**: Wie du die CSS-Klassen einfügst erfährst du im Artikel [ThemeWare® CSS-Klassen für Erlebniswelten](/wissensdatenbank/anleitungen/erlebniswelten/themeware-css-klassen-fuer-erlebniswelten.md).
{% endhint %}

#### Details

<figure><img src="/files/1C45v0vmrtjb0gAceGT9" alt=""><figcaption></figcaption></figure>

***

### ThemeWare® CMS Spalten-Blöcke

Die neuen CSS-Gap-Klassen funktionieren auch in den CMS Spalten-Blöcken von ThemeWare®.

#### Details

<figure><img src="/files/bfbODMPVRxzweEwkO0xW" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Hinweis**: Möchtest du die Abstände in mobilen Viewports separate anpassen nutze die separaten CSS-Spaltenabstandsklassen: [Spaltenabstände in CMS-Blöcken anpassen](/wissensdatenbank/anleitungen/erlebniswelten/spaltenabstaende-in-cms-bloecken-anpassen.md)
{% endhint %}