# Spaltenabstände in CMS-Blöcken anpassen
## Column-Klassen – Spaltenabstände in CMS-Blöcken
ThemeWare® stellt dir eine umfangreiche Auswahl an CSS-Column-Klassen zu Verfügung mit welchen du die Spaltenabstände in CMS-Blöcken modifizieren kannst – also die Abstände zwischen den einzelnen Elemente bzw. Spalten (= Slots).
> 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)
{% hint style="success" %}
**Tipp**: Anwendungsbeispiele findest du in unseren [Demoshops](https://demo.themeware.design/modern/Features/ThemeWare-CMS-Styling/Spaltenabstaende-in-CMS-Bloecken-anpassen/).
{% endhint %}
{% hint style="info" %}
**Hinweis**: Nutze für die Anpassung von Abständen in CMS-Blöcken gerne die neuen, intuitiveren CSS-Klassen von ThemeWare®: [Abstände in CMS-Blöcken anpassen](/wissensdatenbank/anleitungen/erlebniswelten/abstande-in-cms-blocken-anpassen.md)
{% endhint %}
***
## ThemeWare® "Spalten" CMS-Blöcke
Spalten in CMS-Blöcken haben in Shopware 6 einen fest definierten Abstand von `40px` (2x `20px`). Mit ThemeWare® stehen dir verschiedene CSS-Klassen zur Verfügung um diese Abstände ändern zu können.
Die ThemeWare® Spaltenabstandsklassen funktionieren für ThemeWare® CMS Spalten-Blöcke sowie die meisten Standard CMS-Blöcke von Shopware.
| CSS-Klasse | Bereich | Funktionsbeschreibung |
| -------------------------- | ------- | --------------------------------------------------------------- |
| **twt-cms-col-padding-0** | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 0 Pixel. |
| **twt-cms-col-padding-5** | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 5 Pixel. |
| **twt-cms-col-padding-10** | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 10 Pixel. |
| **twt-cms-col-padding-15** | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 15 Pixel. |
| **-** | - | 20 Pixel ist der Standard Spalten-Abstand. |
| **twt-cms-col-padding-25** | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 25 Pixel. |
| **twt-cms-col-padding-30** | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 30 Pixel. |
| **twt-cms-col-padding-35** | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 35 Pixel. |
| **twt-cms-col-padding-40** | Block | Setzt den Innenabstand für Spalten in CMS-Blöcken auf 40 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
#### Beispiel
Links: Standard Spaltenabstand | Rechts: twt-cms-col-padding-10
{% hint style="info" %}
**Hinweis**: Du kannst die ThemeWare® "CSS-Klassen für Spaltenabstände" je nach Bedarf aktivieren bzw. deaktivieren. Die Konfiguration findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen".
{% endhint %}
### Mobile Darstellung
In mobilen Viewports werden Spalten untereinander dargestellt. Dabei haben Sie einen fest definierten Abstand von 0px. Mit ThemeWare® ab Version 2.1 stehen dir verschiedene CSS-Klassen zur Verfügung um diese Abstände ändern zu können.
Die CSS-Klassen funktionieren für ThemeWare® CMS Spalten-Blöcke sowie die meisten Standard CMS-Blöcke von Shopware.
| Klasse | Bereich | Funktionsbeschreibung |
| ------------------------- | ------- | ----------------------------------------------------------------------- |
| **-** | - | 0 Pixel ist der Standard Spalten-Abstand. |
| **twt-cms-col-margin-5** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 5 Pixel. |
| **twt-cms-col-margin-10** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 10 Pixel. |
| **twt-cms-col-margin-15** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 15 Pixel. |
| **twt-cms-col-margin-20** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 20 Pixel. |
| **twt-cms-col-margin-25** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 25 Pixel. |
| **twt-cms-col-margin-30** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 30 Pixel. |
| **twt-cms-col-margin-35** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 35 Pixel. |
| **twt-cms-col-margin-40** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 40 Pixel. |
| **twt-cms-col-margin-45** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 45 Pixel. |
| **twt-cms-col-margin-50** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 50 Pixel. |
| **twt-cms-col-margin-55** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 55 Pixel. |
| **twt-cms-col-margin-60** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 60 Pixel. |
| **twt-cms-col-margin-65** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 65 Pixel. |
| **twt-cms-col-margin-70** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 70 Pixel. |
| **twt-cms-col-margin-75** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 75 Pixel. |
| **twt-cms-col-margin-80** | Block | Setzt den "Abstand nach unten" für Spalten in CMS-Blöcken auf 80 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
#### Beispiele
Links: Standard | Rechts: twt-cms-col-margin-15
***
## ThemeWare® "Grid" CMS-Blöcke
Du kannst die oben genannten CSS-Klassen für "Spalten"-Blöcke auch in "Grid"-Blöcken von ThemeWare® nutzen, wir haben für diese mit ThemeWare® 3.2.0 aber neue, intuitivere CSS-Klassen eingeführt und empfehlen künftig diese neuen CSS-Klassen zu nutzen.
Mehr Informationen dazu findest du in folgendem Artikel:
{% content-ref url="/pages/lzDqaCcoxDA4lVfJhP0i" %}
[Abstände in CMS-Blöcken anpassen](/wissensdatenbank/anleitungen/erlebniswelten/abstande-in-cms-blocken-anpassen.md)
{% endcontent-ref %}
***
## Neue CSS-Klassen mit ThemeWare® 3.2
Mit ThemeWare® 3.2.0 haben wir neue CSS-Abstandsklassen für ThemeWare® "Grid" und "Spalten" CMS-Blöcke hinzugefügt. Diese kombinieren die Funktion der beiden oben genannten CSS-Klassen `twt-cms-col-padding` und `twt-cms-col-margin`.
Die neuen CSS-"Gap"-Klassen funktionieren in "Grids" und in den "Spalten"-Blöcken von ThemeWare®.
Mehr Informationen dazu findest du in folgendem Artikel:
{% content-ref url="/pages/lzDqaCcoxDA4lVfJhP0i" %}
[Abstände in CMS-Blöcken anpassen](/wissensdatenbank/anleitungen/erlebniswelten/abstande-in-cms-blocken-anpassen.md)
{% endcontent-ref %}
---
# 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/spaltenabstaende-in-cms-bloecken-anpassen.md?ask=
```
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.