Spickzettel: Spacing-Klassen

1. Pixel (px)

Klasse CSS-Wirkung
m-0 margin: 0px
m-5 margin: 5px
m-10 margin: 10px
m-20 margin: 20px
m-30 margin: 30px
m-40 margin: 40px
m-50 margin: 50px
m-80 margin: 80px
m-100 margin: 100px

Richtungsvarianten:

  • mt-10 → margin-top

  • mb-20 → margin-bottom

  • ml-30 → margin-left

  • mr-40 → margin-right

  • mx-20 → margin-left + margin-right

  • my-30 → margin-top + margin-bottom

Padding:

  • Analog mit p-10, pt-20, px-30 etc.

Negative Margin:

  • mt-20-- → margin-top: -20px

  • mx-10-- → margin-left: -10px; margin-right: -10px

2. Rem (r)

Klasse CSS-Wirkung
m-25r margin: 0.25rem
m-50r margin: 0.50rem
m-100r margin: 1rem
m-200r margin: 2rem
m-300r margin: 3rem
m-400r margin: 4rem
m-500r margin: 5rem

Richtungsvarianten: wie bei Pixeln (mt-50r, mx-25r, py-200r)

Negative Margin:

  • mb-100r-- → margin-bottom: -1rem

3. Prozent (pct)

Klasse CSS-Wirkung
m-5pct margin: 5%
m-10pct margin: 10%
m-25pct margin: 25%
m-50pct margin: 50%
m-75pct margin: 75%
m-100pct margin: 100%

Richtungsvarianten:

  • mx-50pct → margin-left: 50%; margin-right: 50%

  • my-25pct → margin-top: 25%; margin-bottom: 25%

Padding:

  • .px-10pct, .py-50pct → funktioniert analog

💡 Tipp für Redakteure:

  • Pixel = feste Abstände

  • Rem = responsive Abstände

  • Prozent = flexible Breiten/Abstände

  • Negative Werte nur bei Margin, um Elemente zu verschieben

Abstände

Dokumentation: Spacing-Klassen für Redakteure

1. Zweck der Klassen

Mit unseren Spacing-Klassen kannst du Abstände (Margin) und Innenabstände (Padding) auf Elemente anwenden, ohne selbst CSS schreiben zu müssen.

  • Margin (m) → Abstand außerhalb des Elements

  • Padding (p) → Abstand innerhalb des Elements

2. Aufbau der Klassen

Syntax

 
.{property}{richtung}-{wert}{einheit?}
Teil Erklärung
property m = Margin, p = Padding
richtung t = Top, r = Right, b = Bottom, l = Left, x = horizontal (left + right), y = vertikal (top + bottom), leer = alle Seiten
wert Abstandswert (siehe Tabelle unten)
einheit optional, nur bei rem oder %, z. B. r für rem, pct für Prozent

3. Beispiele

Pixel-Werte

 
<div class="mt-10">…</div> <div class="px-20">…</div>

  • .mt-10 → margin-top: 10px

  • .px-20 → padding-left: 20px; padding-right: 20px

Rem-Werte

 
<div class="mb-50r">…</div> <div class="py-25r">…</div>

  • .mb-50r → margin-bottom: 0.50rem

  • .py-25r → padding-top: 0.25rem; padding-bottom: 0.25rem

Prozent-Werte

 
<div class="mx-50pct">…</div>

  • .mx-50pct → margin-left: 50%; margin-right: 50%

4. Negative Abstände (nur Margin)

Du kannst auch negative Margen verwenden, z. B. um Elemente näher zusammenzurücken:

 
<div class="mt-20--">…</div>

  • .mt-20-- → margin-top: -20px

5. Richtlinien für Redakteure

  • Nutze Pixel für präzise Abstände in der UI.

  • Nutze Rem für responsive Layouts, die sich an Schriftgröße anpassen.

  • Nutze Prozent für flexible Breiten/Abstände.

  • Negative Margen nur verwenden, wenn ein Layout bewusst überlappen soll.

6. Übersicht der Kürzel

Klasse Wirkung
m / p Margin / Padding
t / r / b / l Top / Right / Bottom / Left
x / y horizontal / vertical
r rem-Einheit
pct Prozentwert
-- negative Werte (nur Margin)

Breiten

Width/Height Klassen

1️⃣ Standardbreiten in Prozent

Syntax: .w-[Wert] (Prozentzahl von 10 bis 100)

Klasse CSS
.w-10 width: 10%;
.w-20 width: 20%;
.w-25 width: 25%;
.w-33 width: 33%;
.w-50 width: 50%;
.w-66 width: 66%;
.w-75 width: 75%;
.w-100 width: 100%;

2️⃣ Feste Breiten (px / rem)

Pixel: .w-[Wert]px / Rem: .w-[Wert]r

Klasse CSS
.w-100px width: 100px;
.w-200px width: 200px;
.w-300px width: 300px;
.w-400px width: 400px;
.w-25r width: 0.25rem;
.w-50r width: 0.5rem;
.w-100r width: 1rem;
.w-200r width: 2rem;

3️⃣ Min-/Max-Width

Klasse CSS
.mw-50 min-width: 50%;
.mxw-50 max-width: 50%;
.mw-200px min-width: 200px;
.mxw-600px max-width: 600px;
.mw-50r min-width: 0.5rem;
.mxw-100r max-width: 1rem;

4️⃣ Height / Min/Max Height

Klasse CSS
.h-50 height: 50%;
.mh-50 min-height: 50%;
.mxh-50 max-height: 50%;
.h-200px height: 200px;
.mh-100px min-height: 100px;
.mxh-500px max-height: 500px;
.h-50r height: 0.5rem;
.mh-25r min-height: 0.25rem;
.mxh-100r max-height: 1rem;

5️⃣ Hinweise

  • Prozentwerte sind Standard – keine Einheit nötig (.w-50 → width: 50%)
  • Feste Werte in px / rem nur mit Kürzel (.w-200px, .w-50r)
  • Klassen können kombiniert werden, z.B.: .w-50 h-25 mxw-80
  • Alle Klassen sind !important, um einfache Überschreibungen zu ermöglichen