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


---

# 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://wiki.themeware.design/wissensdatenbank/anleitungen/erlebniswelten/abstande-in-cms-blocken-anpassen.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.