> 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/css-abstandsklassen-fuer-erlebniswelten.md).

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