# CSS-Abstandsklassen für CMS-Sektionen/-Blöcke

## Margin-/Padding-Klassen – Abstandsklassen für CMS-Sektionen/-Blöcke

ThemeWare® bietet dir diverse CSS-Abstandsklassen für CMS-Sektionen und 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-Abstandsklassen laden (optional)
> * Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen" => Erweiterte CSS-Abstandsklassen laden (optional)

***

## ThemeWare® CSS-Abstandsklassen

Neben den CSS-Abstandsklassen von Bootstrap stehen dir mit den ThemeWare® CSS-Abstandsklassen weitere (pixelbasierte) Abstandsklassen zur Verfügung um Abstände in Erlebniswelten zu definieren.

Die ThemeWare® CSS-Abstandsklassen werden nach dem folgenden Muster benannt:

```css
// Abstandsklassen:
twt-{Eigenschaft}{Seiten}-{Größe} // für xs

// Erweiterte Abstandsklassen:
twt-{Eigenschaft}{Seiten}-{Breakpoint}-{Größe} // für sm, md, lg und xl
```

#### Beispiel

<figure><img src="/files/FEQSpx8eMrjZbvSyusgM" alt=""><figcaption><p>Links: Standard Abstand | Rechts: Abstandsklasse "twt-mb-5"</p></figcaption></figure>

***

## Bootstrap 4 vs. Bootstrap 5

Beim Update von Bootstrap 4 auf Bootstrap 5 (ab Shopware 6.5) wurden einige Klassen umbenannt um logische Eigenschaftennamen anstelle von Richtungsnamen zu verwenden.

Ab Shopware 6.5 hast du in ThemeWare® daher die Möglichkeit zu wählen ob du die alte Bootstrap 4 oder die neue Bootstrap 5 Schreibweise nutzen möchtest:

* Tab "**Weiteres**" => Bereich "**Erweiterte Einstellungen**" => Abschnitt "**Zusätzliche CSS-Klassen**" => Feld "**CSS-Abstandsklassen laden (optional)**"
  * [Bootstrap 4](#bootstrap-4-shopware-6.4)
  * [Bootstrap 5](#bootstrap-5-shopware-6.5) (default)

Nutzt du die alte Schreibweise und möchtest diese nicht überall ändern, lade einfach die CSS-Abstandsklassen für Bootstrap 4. Neue ThemeWare® Installationen laden automatisch die Bootstrap 5 Abstandsklassen.

Nachfolgend findest du den Aufbau für beide Varianten:

***

## Bootstrap 5 (Shopware 6.5)

| Aufbau  | Beschreibung                                                                                                                                                                                                                                                                                                                                                 |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **twt** | ThemeWare® Prefix                                                                                                                                                                                                                                                                                                                                            |
| **-**   | Trennzeichen                                                                                                                                                                                                                                                                                                                                                 |
| **m**   | <p>Eigenschaft:</p><ul><li>m => Margin (Außenabstand)</li><li>p => Padding (Innenabstand)</li></ul>                                                                                                                                                                                                                                                          |
| **t**   | <p>Seiten:</p><ul><li>t => Top (oben)</li><li><mark style="background-color:yellow;">e => End (rechts)</mark></li><li>b => Bottom (unten)</li><li><mark style="background-color:yellow;">s => Start (links)</mark></li><li>x => End/Start (links und rechts)</li><li>y => Top/Bottom (oben und unten)</li><li>Keine Angabe => für alle vier Seiten</li></ul> |
| **-**   | Trennzeichen                                                                                                                                                                                                                                                                                                                                                 |
| **md**  | <p>Breakpoint: (optional)</p><ul><li>sm => ab 576px</li><li>md => ab 768px</li><li>lg => ab 992px</li><li>xl => ab 1200px</li><li>Keine Angabe => ab 0px</li></ul>                                                                                                                                                                                           |
| **-**   | Trennzeichen                                                                                                                                                                                                                                                                                                                                                 |
| **n**   | <p>Negativer Wert (nur Margin): (optional)</p><ul><li>n => Wert wird negativ verwendet (-x Pixel)</li><li>Keine Angabe => wird positiv verwendet</li></ul>                                                                                                                                                                                                   |
| **2**   | <p>Größe:</p><ul><li>0 => 0 Pixel</li><li>1 => 10 Pixel</li><li>2 => 20 Pixel</li><li>3 => 30 Pixel</li><li>4 => 40 Pixel</li><li>5 => 50 Pixel</li><li>6 => 60 Pixel</li><li>7 => 70 Pixel</li><li>8 => 80 Pixel</li><li>9 => 90 Pixel</li><li>auto</li></ul>                                                                                               |

**Beispiele**

```
// Abstandsklassen:
twt-p-3       // padding: 30px
twt-px-4      // padding: 0 40px
twt-ms-1      // margin-left: 10px
twt-me-2      // margin-right: 20px
twt-mt-n3     // margin-top: -30px

// Erweiterte Abstandsklassen:
twt-m-md-4    // margin: 40px (ab 768px)
twt-mt-md-n2  // margin-top: -20px (ab 768px)
```

***

## Bootstrap 4 (Shopware 6.4)

| Aufbau  | Beschreibung                                                                                                                                                                                                                                                                                                                                                   |
| ------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **twt** | ThemeWare® Prefix                                                                                                                                                                                                                                                                                                                                              |
| **-**   | Trennzeichen                                                                                                                                                                                                                                                                                                                                                   |
| **m**   | <p>Eigenschaft:</p><ul><li>m => Margin (Außenabstand)</li><li>p => Padding (Innenabstand)</li></ul>                                                                                                                                                                                                                                                            |
| **t**   | <p>Seiten:</p><ul><li>t => Top (oben)</li><li><mark style="background-color:yellow;">r => Right (rechts)</mark></li><li>b => Bottom (unten)</li><li><mark style="background-color:yellow;">l => Left (links)</mark></li><li>x => Left/Right (links und rechts)</li><li>y => Top/Bottom (oben und unten)</li><li>Keine Angabe => für alle vier Seiten</li></ul> |
| **-**   | Trennzeichen                                                                                                                                                                                                                                                                                                                                                   |
| **md**  | <p>Breakpoint: (optional)</p><ul><li>sm => ab 576px</li><li>md => ab 768px</li><li>lg => ab 992px</li><li>xl => ab 1200px</li><li>Keine Angabe => ab 0px</li></ul>                                                                                                                                                                                             |
| **-**   | Trennzeichen                                                                                                                                                                                                                                                                                                                                                   |
| **n**   | <p>Negativer Wert (nur Margin): (optional)</p><ul><li>n => Wert wird negativ verwendet (-x Pixel)</li><li>Keine Angabe => wird positiv verwendet</li></ul>                                                                                                                                                                                                     |
| **2**   | <p>Größe:</p><ul><li>0 => 0 Pixel</li><li>1 => 10 Pixel</li><li>2 => 20 Pixel</li><li>3 => 30 Pixel</li><li>4 => 40 Pixel</li><li>5 => 50 Pixel</li><li>6 => 60 Pixel</li><li>7 => 70 Pixel</li><li>8 => 80 Pixel</li><li>9 => 90 Pixel</li><li>auto</li></ul>                                                                                                 |

**Beispiele**

```
// Abstandsklassen:
twt-p-3       // padding: 30px
twt-px-4      // padding: 0 40px
twt-ml-1      // margin-left: 10px
twt-mr-2      // margin-right: 20px
twt-mt-n3     // margin-top: -30px

// Erweiterte Abstandsklassen:
twt-m-md-4    // margin: 40px (ab 768px)
twt-mt-md-n2  // margin-top: -20px (ab 768px)
```

{% hint style="info" %}
**Hinweis**: Du kannst die ThemeWare® "CSS-Abstandsklassen" je nach Bedarf aktivieren bzw. deaktivieren. Die Konfiguration findest du im Tab "Weiteres" => Bereich "Erweiterte Einstellungen" => Abschnitt "Zusätzliche CSS-Klassen"".
{% 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/css-abstandsklassen-fuer-erlebniswelten.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.