Zum Inhalt
r/ rittek uiDOCS
Admin-Demo ↗

ABSTÄNDE / GRÖSSEN / UTILITY-REFERENZ

Abstände

Padding ist der innere Abstand, Margin der äußere Abstand und Gap der Abstand zwischen Flex- oder Grid-Elementen. Die numerische Skala basiert auf Viertel-rem und wird mit der Seitendichte multipliziert.

Ausprobieren und übernehmen

Die Vorschauen verwenden die aktuell gewählten Demo-Einstellungen. Direkt unter jedem Beispiel steht das dazugehörige HTML.

Innenabstand und Abstand zwischen Elementen

Die Karte erhält p-6, ihre Elemente untereinander gap-4. Bei anderer Seitendichte verändern sich beide gemeinsam.

Ein einheitlicher Rhythmus

Innenabstand und Abstand zwischen Inhalten sind unabhängig.

px-4 und py-2
HTML
<div class="grid gap-4 border rounded p-6 bg-surface">
  <strong>Ein einheitlicher Rhythmus</strong>
  <p class="text-muted">Innenabstand und Abstand zwischen Inhalten sind unabhängig.</p>
  <span class="bg-accent rounded px-4 py-2">px-4 und py-2</span>
</div>

Logische Abstände

ps/pe und ms/me folgen der Schreibrichtung. Dadurch lässt sich derselbe Aufbau auch für RTL verwenden.

Logischer Anfang mit ps-8

Logisches Ende mit pe-8

HTML
<div dir="rtl" class="border rounded p-4 bg-surface">
  <p class="ps-8 text-start">Logischer Anfang mit ps-8</p>
  <p class="pe-8 text-end mt-4 text-muted">Logisches Ende mit pe-8</p>
</div>

Unterstützte Klassen

Diese Tabellen werden direkt aus den vorhandenen Utility-Regeln erzeugt. Sie zeigen Basisklassen; responsive und Zustandsvarianten sind unter Responsive Layouts & Zustände erklärt.

Padding

p gilt für alle Seiten; x/y für beide Achsen; t/b/l/r für physische Seiten und s/e für logischen Anfang bzw. Ende.

Padding: Klassen und erzeugtes CSS
KlasseCSS
p-0padding:0
px-0padding-inline:0
py-0padding-block:0
pt-0padding-top:0
pb-0padding-bottom:0
ps-0padding-inline-start:0
pe-0padding-inline-end:0
p-1padding:calc(0.25rem * var(--r-density))
px-1padding-inline:calc(0.25rem * var(--r-density))
py-1padding-block:calc(0.25rem * var(--r-density))
pt-1padding-top:calc(0.25rem * var(--r-density))
pb-1padding-bottom:calc(0.25rem * var(--r-density))
ps-1padding-inline-start:calc(0.25rem * var(--r-density))
pe-1padding-inline-end:calc(0.25rem * var(--r-density))
p-2padding:calc(0.5rem * var(--r-density))
px-2padding-inline:calc(0.5rem * var(--r-density))
py-2padding-block:calc(0.5rem * var(--r-density))
pt-2padding-top:calc(0.5rem * var(--r-density))
pb-2padding-bottom:calc(0.5rem * var(--r-density))
ps-2padding-inline-start:calc(0.5rem * var(--r-density))
pe-2padding-inline-end:calc(0.5rem * var(--r-density))
p-3padding:calc(0.75rem * var(--r-density))
px-3padding-inline:calc(0.75rem * var(--r-density))
py-3padding-block:calc(0.75rem * var(--r-density))
pt-3padding-top:calc(0.75rem * var(--r-density))
pb-3padding-bottom:calc(0.75rem * var(--r-density))
ps-3padding-inline-start:calc(0.75rem * var(--r-density))
pe-3padding-inline-end:calc(0.75rem * var(--r-density))
p-4padding:calc(1rem * var(--r-density))
px-4padding-inline:calc(1rem * var(--r-density))
py-4padding-block:calc(1rem * var(--r-density))
pt-4padding-top:calc(1rem * var(--r-density))
pb-4padding-bottom:calc(1rem * var(--r-density))
ps-4padding-inline-start:calc(1rem * var(--r-density))
pe-4padding-inline-end:calc(1rem * var(--r-density))
p-5padding:calc(1.25rem * var(--r-density))
px-5padding-inline:calc(1.25rem * var(--r-density))
py-5padding-block:calc(1.25rem * var(--r-density))
pt-5padding-top:calc(1.25rem * var(--r-density))
pb-5padding-bottom:calc(1.25rem * var(--r-density))
ps-5padding-inline-start:calc(1.25rem * var(--r-density))
pe-5padding-inline-end:calc(1.25rem * var(--r-density))
p-6padding:calc(1.5rem * var(--r-density))
px-6padding-inline:calc(1.5rem * var(--r-density))
py-6padding-block:calc(1.5rem * var(--r-density))
pt-6padding-top:calc(1.5rem * var(--r-density))
pb-6padding-bottom:calc(1.5rem * var(--r-density))
ps-6padding-inline-start:calc(1.5rem * var(--r-density))
pe-6padding-inline-end:calc(1.5rem * var(--r-density))
p-8padding:calc(2rem * var(--r-density))
px-8padding-inline:calc(2rem * var(--r-density))
py-8padding-block:calc(2rem * var(--r-density))
pt-8padding-top:calc(2rem * var(--r-density))
pb-8padding-bottom:calc(2rem * var(--r-density))
ps-8padding-inline-start:calc(2rem * var(--r-density))
pe-8padding-inline-end:calc(2rem * var(--r-density))
p-10padding:calc(2.5rem * var(--r-density))
px-10padding-inline:calc(2.5rem * var(--r-density))
py-10padding-block:calc(2.5rem * var(--r-density))
pt-10padding-top:calc(2.5rem * var(--r-density))
pb-10padding-bottom:calc(2.5rem * var(--r-density))
ps-10padding-inline-start:calc(2.5rem * var(--r-density))
pe-10padding-inline-end:calc(2.5rem * var(--r-density))
p-12padding:calc(3rem * var(--r-density))
px-12padding-inline:calc(3rem * var(--r-density))
py-12padding-block:calc(3rem * var(--r-density))
pt-12padding-top:calc(3rem * var(--r-density))
pb-12padding-bottom:calc(3rem * var(--r-density))
ps-12padding-inline-start:calc(3rem * var(--r-density))
pe-12padding-inline-end:calc(3rem * var(--r-density))
p-16padding:calc(4rem * var(--r-density))
px-16padding-inline:calc(4rem * var(--r-density))
py-16padding-block:calc(4rem * var(--r-density))
pt-16padding-top:calc(4rem * var(--r-density))
pb-16padding-bottom:calc(4rem * var(--r-density))
ps-16padding-inline-start:calc(4rem * var(--r-density))
pe-16padding-inline-end:calc(4rem * var(--r-density))
p-20padding:calc(5rem * var(--r-density))
px-20padding-inline:calc(5rem * var(--r-density))
py-20padding-block:calc(5rem * var(--r-density))
pt-20padding-top:calc(5rem * var(--r-density))
pb-20padding-bottom:calc(5rem * var(--r-density))
ps-20padding-inline-start:calc(5rem * var(--r-density))
pe-20padding-inline-end:calc(5rem * var(--r-density))
p-24padding:calc(6rem * var(--r-density))
px-24padding-inline:calc(6rem * var(--r-density))
py-24padding-block:calc(6rem * var(--r-density))
pt-24padding-top:calc(6rem * var(--r-density))
pb-24padding-bottom:calc(6rem * var(--r-density))
ps-24padding-inline-start:calc(6rem * var(--r-density))
pe-24padding-inline-end:calc(6rem * var(--r-density))
p-32padding:calc(8rem * var(--r-density))
px-32padding-inline:calc(8rem * var(--r-density))
py-32padding-block:calc(8rem * var(--r-density))
pt-32padding-top:calc(8rem * var(--r-density))
pb-32padding-bottom:calc(8rem * var(--r-density))
ps-32padding-inline-start:calc(8rem * var(--r-density))
pe-32padding-inline-end:calc(8rem * var(--r-density))
p-40padding:calc(10rem * var(--r-density))
px-40padding-inline:calc(10rem * var(--r-density))
py-40padding-block:calc(10rem * var(--r-density))
pt-40padding-top:calc(10rem * var(--r-density))
pb-40padding-bottom:calc(10rem * var(--r-density))
ps-40padding-inline-start:calc(10rem * var(--r-density))
pe-40padding-inline-end:calc(10rem * var(--r-density))
p-48padding:calc(12rem * var(--r-density))
px-48padding-inline:calc(12rem * var(--r-density))
py-48padding-block:calc(12rem * var(--r-density))
pt-48padding-top:calc(12rem * var(--r-density))
pb-48padding-bottom:calc(12rem * var(--r-density))
ps-48padding-inline-start:calc(12rem * var(--r-density))
pe-48padding-inline-end:calc(12rem * var(--r-density))
p-64padding:calc(16rem * var(--r-density))
px-64padding-inline:calc(16rem * var(--r-density))
py-64padding-block:calc(16rem * var(--r-density))
pt-64padding-top:calc(16rem * var(--r-density))
pb-64padding-bottom:calc(16rem * var(--r-density))
ps-64padding-inline-start:calc(16rem * var(--r-density))
pe-64padding-inline-end:calc(16rem * var(--r-density))
pl-0padding-left:0
pl-1padding-left:calc(0.25rem * var(--r-density))
pl-2padding-left:calc(0.5rem * var(--r-density))
pl-3padding-left:calc(0.75rem * var(--r-density))
pl-4padding-left:calc(1rem * var(--r-density))
pl-5padding-left:calc(1.25rem * var(--r-density))
pl-6padding-left:calc(1.5rem * var(--r-density))
pl-8padding-left:calc(2rem * var(--r-density))
pl-10padding-left:calc(2.5rem * var(--r-density))
pl-12padding-left:calc(3rem * var(--r-density))
pl-16padding-left:calc(4rem * var(--r-density))
pl-20padding-left:calc(5rem * var(--r-density))
pl-24padding-left:calc(6rem * var(--r-density))
pl-32padding-left:calc(8rem * var(--r-density))
pl-40padding-left:calc(10rem * var(--r-density))
pl-48padding-left:calc(12rem * var(--r-density))
pl-64padding-left:calc(16rem * var(--r-density))
pr-0padding-right:0
pr-1padding-right:calc(0.25rem * var(--r-density))
pr-2padding-right:calc(0.5rem * var(--r-density))
pr-3padding-right:calc(0.75rem * var(--r-density))
pr-4padding-right:calc(1rem * var(--r-density))
pr-5padding-right:calc(1.25rem * var(--r-density))
pr-6padding-right:calc(1.5rem * var(--r-density))
pr-8padding-right:calc(2rem * var(--r-density))
pr-10padding-right:calc(2.5rem * var(--r-density))
pr-12padding-right:calc(3rem * var(--r-density))
pr-16padding-right:calc(4rem * var(--r-density))
pr-20padding-right:calc(5rem * var(--r-density))
pr-24padding-right:calc(6rem * var(--r-density))
pr-32padding-right:calc(8rem * var(--r-density))
pr-40padding-right:calc(10rem * var(--r-density))
pr-48padding-right:calc(12rem * var(--r-density))
pr-64padding-right:calc(16rem * var(--r-density))

153 unterstützte Basisklassen in dieser Gruppe.

Margin

Positive und verfügbare negative Werte verschieben Elemente über äußere Abstände. Negative Werte können Inhalte überlagern.

Margin: Klassen und erzeugtes CSS
KlasseCSS
m-0margin:0
mx-0margin-inline:0
my-0margin-block:0
mt-0margin-top:0
mb-0margin-bottom:0
ms-0margin-inline-start:0
me-0margin-inline-end:0
m-1margin:calc(0.25rem * var(--r-density))
mx-1margin-inline:calc(0.25rem * var(--r-density))
my-1margin-block:calc(0.25rem * var(--r-density))
mt-1margin-top:calc(0.25rem * var(--r-density))
mb-1margin-bottom:calc(0.25rem * var(--r-density))
ms-1margin-inline-start:calc(0.25rem * var(--r-density))
me-1margin-inline-end:calc(0.25rem * var(--r-density))
m-2margin:calc(0.5rem * var(--r-density))
mx-2margin-inline:calc(0.5rem * var(--r-density))
my-2margin-block:calc(0.5rem * var(--r-density))
mt-2margin-top:calc(0.5rem * var(--r-density))
mb-2margin-bottom:calc(0.5rem * var(--r-density))
ms-2margin-inline-start:calc(0.5rem * var(--r-density))
me-2margin-inline-end:calc(0.5rem * var(--r-density))
m-3margin:calc(0.75rem * var(--r-density))
mx-3margin-inline:calc(0.75rem * var(--r-density))
my-3margin-block:calc(0.75rem * var(--r-density))
mt-3margin-top:calc(0.75rem * var(--r-density))
mb-3margin-bottom:calc(0.75rem * var(--r-density))
ms-3margin-inline-start:calc(0.75rem * var(--r-density))
me-3margin-inline-end:calc(0.75rem * var(--r-density))
m-4margin:calc(1rem * var(--r-density))
mx-4margin-inline:calc(1rem * var(--r-density))
my-4margin-block:calc(1rem * var(--r-density))
mt-4margin-top:calc(1rem * var(--r-density))
mb-4margin-bottom:calc(1rem * var(--r-density))
ms-4margin-inline-start:calc(1rem * var(--r-density))
me-4margin-inline-end:calc(1rem * var(--r-density))
m-5margin:calc(1.25rem * var(--r-density))
mx-5margin-inline:calc(1.25rem * var(--r-density))
my-5margin-block:calc(1.25rem * var(--r-density))
mt-5margin-top:calc(1.25rem * var(--r-density))
mb-5margin-bottom:calc(1.25rem * var(--r-density))
ms-5margin-inline-start:calc(1.25rem * var(--r-density))
me-5margin-inline-end:calc(1.25rem * var(--r-density))
m-6margin:calc(1.5rem * var(--r-density))
mx-6margin-inline:calc(1.5rem * var(--r-density))
my-6margin-block:calc(1.5rem * var(--r-density))
mt-6margin-top:calc(1.5rem * var(--r-density))
mb-6margin-bottom:calc(1.5rem * var(--r-density))
ms-6margin-inline-start:calc(1.5rem * var(--r-density))
me-6margin-inline-end:calc(1.5rem * var(--r-density))
m-8margin:calc(2rem * var(--r-density))
mx-8margin-inline:calc(2rem * var(--r-density))
my-8margin-block:calc(2rem * var(--r-density))
mt-8margin-top:calc(2rem * var(--r-density))
mb-8margin-bottom:calc(2rem * var(--r-density))
ms-8margin-inline-start:calc(2rem * var(--r-density))
me-8margin-inline-end:calc(2rem * var(--r-density))
m-10margin:calc(2.5rem * var(--r-density))
mx-10margin-inline:calc(2.5rem * var(--r-density))
my-10margin-block:calc(2.5rem * var(--r-density))
mt-10margin-top:calc(2.5rem * var(--r-density))
mb-10margin-bottom:calc(2.5rem * var(--r-density))
ms-10margin-inline-start:calc(2.5rem * var(--r-density))
me-10margin-inline-end:calc(2.5rem * var(--r-density))
m-12margin:calc(3rem * var(--r-density))
mx-12margin-inline:calc(3rem * var(--r-density))
my-12margin-block:calc(3rem * var(--r-density))
mt-12margin-top:calc(3rem * var(--r-density))
mb-12margin-bottom:calc(3rem * var(--r-density))
ms-12margin-inline-start:calc(3rem * var(--r-density))
me-12margin-inline-end:calc(3rem * var(--r-density))
m-16margin:calc(4rem * var(--r-density))
mx-16margin-inline:calc(4rem * var(--r-density))
my-16margin-block:calc(4rem * var(--r-density))
mt-16margin-top:calc(4rem * var(--r-density))
mb-16margin-bottom:calc(4rem * var(--r-density))
ms-16margin-inline-start:calc(4rem * var(--r-density))
me-16margin-inline-end:calc(4rem * var(--r-density))
m-20margin:calc(5rem * var(--r-density))
mx-20margin-inline:calc(5rem * var(--r-density))
my-20margin-block:calc(5rem * var(--r-density))
mt-20margin-top:calc(5rem * var(--r-density))
mb-20margin-bottom:calc(5rem * var(--r-density))
ms-20margin-inline-start:calc(5rem * var(--r-density))
me-20margin-inline-end:calc(5rem * var(--r-density))
m-24margin:calc(6rem * var(--r-density))
mx-24margin-inline:calc(6rem * var(--r-density))
my-24margin-block:calc(6rem * var(--r-density))
mt-24margin-top:calc(6rem * var(--r-density))
mb-24margin-bottom:calc(6rem * var(--r-density))
ms-24margin-inline-start:calc(6rem * var(--r-density))
me-24margin-inline-end:calc(6rem * var(--r-density))
m-32margin:calc(8rem * var(--r-density))
mx-32margin-inline:calc(8rem * var(--r-density))
my-32margin-block:calc(8rem * var(--r-density))
mt-32margin-top:calc(8rem * var(--r-density))
mb-32margin-bottom:calc(8rem * var(--r-density))
ms-32margin-inline-start:calc(8rem * var(--r-density))
me-32margin-inline-end:calc(8rem * var(--r-density))
m-40margin:calc(10rem * var(--r-density))
mx-40margin-inline:calc(10rem * var(--r-density))
my-40margin-block:calc(10rem * var(--r-density))
mt-40margin-top:calc(10rem * var(--r-density))
mb-40margin-bottom:calc(10rem * var(--r-density))
ms-40margin-inline-start:calc(10rem * var(--r-density))
me-40margin-inline-end:calc(10rem * var(--r-density))
m-48margin:calc(12rem * var(--r-density))
mx-48margin-inline:calc(12rem * var(--r-density))
my-48margin-block:calc(12rem * var(--r-density))
mt-48margin-top:calc(12rem * var(--r-density))
mb-48margin-bottom:calc(12rem * var(--r-density))
ms-48margin-inline-start:calc(12rem * var(--r-density))
me-48margin-inline-end:calc(12rem * var(--r-density))
m-64margin:calc(16rem * var(--r-density))
mx-64margin-inline:calc(16rem * var(--r-density))
my-64margin-block:calc(16rem * var(--r-density))
mt-64margin-top:calc(16rem * var(--r-density))
mb-64margin-bottom:calc(16rem * var(--r-density))
ms-64margin-inline-start:calc(16rem * var(--r-density))
me-64margin-inline-end:calc(16rem * var(--r-density))
ml-0margin-left:0
ml-1margin-left:calc(0.25rem * var(--r-density))
ml-2margin-left:calc(0.5rem * var(--r-density))
ml-3margin-left:calc(0.75rem * var(--r-density))
ml-4margin-left:calc(1rem * var(--r-density))
ml-5margin-left:calc(1.25rem * var(--r-density))
ml-6margin-left:calc(1.5rem * var(--r-density))
ml-8margin-left:calc(2rem * var(--r-density))
ml-10margin-left:calc(2.5rem * var(--r-density))
ml-12margin-left:calc(3rem * var(--r-density))
ml-16margin-left:calc(4rem * var(--r-density))
ml-20margin-left:calc(5rem * var(--r-density))
ml-24margin-left:calc(6rem * var(--r-density))
ml-32margin-left:calc(8rem * var(--r-density))
ml-40margin-left:calc(10rem * var(--r-density))
ml-48margin-left:calc(12rem * var(--r-density))
ml-64margin-left:calc(16rem * var(--r-density))
mr-0margin-right:0
mr-1margin-right:calc(0.25rem * var(--r-density))
mr-2margin-right:calc(0.5rem * var(--r-density))
mr-3margin-right:calc(0.75rem * var(--r-density))
mr-4margin-right:calc(1rem * var(--r-density))
mr-5margin-right:calc(1.25rem * var(--r-density))
mr-6margin-right:calc(1.5rem * var(--r-density))
mr-8margin-right:calc(2rem * var(--r-density))
mr-10margin-right:calc(2.5rem * var(--r-density))
mr-12margin-right:calc(3rem * var(--r-density))
mr-16margin-right:calc(4rem * var(--r-density))
mr-20margin-right:calc(5rem * var(--r-density))
mr-24margin-right:calc(6rem * var(--r-density))
mr-32margin-right:calc(8rem * var(--r-density))
mr-40margin-right:calc(10rem * var(--r-density))
mr-48margin-right:calc(12rem * var(--r-density))
mr-64margin-right:calc(16rem * var(--r-density))
-m-0margin:0
-m-1margin:calc(-0.25rem * var(--r-density))
-m-2margin:calc(-0.5rem * var(--r-density))
-m-3margin:calc(-0.75rem * var(--r-density))
-m-4margin:calc(-1rem * var(--r-density))
-m-5margin:calc(-1.25rem * var(--r-density))
-m-6margin:calc(-1.5rem * var(--r-density))
-m-8margin:calc(-2rem * var(--r-density))
-m-10margin:calc(-2.5rem * var(--r-density))
-m-12margin:calc(-3rem * var(--r-density))
-m-16margin:calc(-4rem * var(--r-density))
-m-20margin:calc(-5rem * var(--r-density))
-m-24margin:calc(-6rem * var(--r-density))
-m-32margin:calc(-8rem * var(--r-density))
-m-40margin:calc(-10rem * var(--r-density))
-m-48margin:calc(-12rem * var(--r-density))
-m-64margin:calc(-16rem * var(--r-density))
-mx-0margin-inline:0
-mx-1margin-inline:calc(-0.25rem * var(--r-density))
-mx-2margin-inline:calc(-0.5rem * var(--r-density))
-mx-3margin-inline:calc(-0.75rem * var(--r-density))
-mx-4margin-inline:calc(-1rem * var(--r-density))
-mx-5margin-inline:calc(-1.25rem * var(--r-density))
-mx-6margin-inline:calc(-1.5rem * var(--r-density))
-mx-8margin-inline:calc(-2rem * var(--r-density))
-mx-10margin-inline:calc(-2.5rem * var(--r-density))
-mx-12margin-inline:calc(-3rem * var(--r-density))
-mx-16margin-inline:calc(-4rem * var(--r-density))
-mx-20margin-inline:calc(-5rem * var(--r-density))
-mx-24margin-inline:calc(-6rem * var(--r-density))
-mx-32margin-inline:calc(-8rem * var(--r-density))
-mx-40margin-inline:calc(-10rem * var(--r-density))
-mx-48margin-inline:calc(-12rem * var(--r-density))
-mx-64margin-inline:calc(-16rem * var(--r-density))
-my-0margin-block:0
-my-1margin-block:calc(-0.25rem * var(--r-density))
-my-2margin-block:calc(-0.5rem * var(--r-density))
-my-3margin-block:calc(-0.75rem * var(--r-density))
-my-4margin-block:calc(-1rem * var(--r-density))
-my-5margin-block:calc(-1.25rem * var(--r-density))
-my-6margin-block:calc(-1.5rem * var(--r-density))
-my-8margin-block:calc(-2rem * var(--r-density))
-my-10margin-block:calc(-2.5rem * var(--r-density))
-my-12margin-block:calc(-3rem * var(--r-density))
-my-16margin-block:calc(-4rem * var(--r-density))
-my-20margin-block:calc(-5rem * var(--r-density))
-my-24margin-block:calc(-6rem * var(--r-density))
-my-32margin-block:calc(-8rem * var(--r-density))
-my-40margin-block:calc(-10rem * var(--r-density))
-my-48margin-block:calc(-12rem * var(--r-density))
-my-64margin-block:calc(-16rem * var(--r-density))
-ml-0margin-left:0
-ml-1margin-left:calc(-0.25rem * var(--r-density))
-ml-2margin-left:calc(-0.5rem * var(--r-density))
-ml-3margin-left:calc(-0.75rem * var(--r-density))
-ml-4margin-left:calc(-1rem * var(--r-density))
-ml-5margin-left:calc(-1.25rem * var(--r-density))
-ml-6margin-left:calc(-1.5rem * var(--r-density))
-ml-8margin-left:calc(-2rem * var(--r-density))
-ml-10margin-left:calc(-2.5rem * var(--r-density))
-ml-12margin-left:calc(-3rem * var(--r-density))
-ml-16margin-left:calc(-4rem * var(--r-density))
-ml-20margin-left:calc(-5rem * var(--r-density))
-ml-24margin-left:calc(-6rem * var(--r-density))
-ml-32margin-left:calc(-8rem * var(--r-density))
-ml-40margin-left:calc(-10rem * var(--r-density))
-ml-48margin-left:calc(-12rem * var(--r-density))
-ml-64margin-left:calc(-16rem * var(--r-density))
-mr-0margin-right:0
-mr-1margin-right:calc(-0.25rem * var(--r-density))
-mr-2margin-right:calc(-0.5rem * var(--r-density))
-mr-3margin-right:calc(-0.75rem * var(--r-density))
-mr-4margin-right:calc(-1rem * var(--r-density))
-mr-5margin-right:calc(-1.25rem * var(--r-density))
-mr-6margin-right:calc(-1.5rem * var(--r-density))
-mr-8margin-right:calc(-2rem * var(--r-density))
-mr-10margin-right:calc(-2.5rem * var(--r-density))
-mr-12margin-right:calc(-3rem * var(--r-density))
-mr-16margin-right:calc(-4rem * var(--r-density))
-mr-20margin-right:calc(-5rem * var(--r-density))
-mr-24margin-right:calc(-6rem * var(--r-density))
-mr-32margin-right:calc(-8rem * var(--r-density))
-mr-40margin-right:calc(-10rem * var(--r-density))
-mr-48margin-right:calc(-12rem * var(--r-density))
-mr-64margin-right:calc(-16rem * var(--r-density))
-mt-0margin-top:0
-mt-1margin-top:calc(-0.25rem * var(--r-density))
-mt-2margin-top:calc(-0.5rem * var(--r-density))
-mt-3margin-top:calc(-0.75rem * var(--r-density))
-mt-4margin-top:calc(-1rem * var(--r-density))
-mt-5margin-top:calc(-1.25rem * var(--r-density))
-mt-6margin-top:calc(-1.5rem * var(--r-density))
-mt-8margin-top:calc(-2rem * var(--r-density))
-mt-10margin-top:calc(-2.5rem * var(--r-density))
-mt-12margin-top:calc(-3rem * var(--r-density))
-mt-16margin-top:calc(-4rem * var(--r-density))
-mt-20margin-top:calc(-5rem * var(--r-density))
-mt-24margin-top:calc(-6rem * var(--r-density))
-mt-32margin-top:calc(-8rem * var(--r-density))
-mt-40margin-top:calc(-10rem * var(--r-density))
-mt-48margin-top:calc(-12rem * var(--r-density))
-mt-64margin-top:calc(-16rem * var(--r-density))
-mb-0margin-bottom:0
-mb-1margin-bottom:calc(-0.25rem * var(--r-density))
-mb-2margin-bottom:calc(-0.5rem * var(--r-density))
-mb-3margin-bottom:calc(-0.75rem * var(--r-density))
-mb-4margin-bottom:calc(-1rem * var(--r-density))
-mb-5margin-bottom:calc(-1.25rem * var(--r-density))
-mb-6margin-bottom:calc(-1.5rem * var(--r-density))
-mb-8margin-bottom:calc(-2rem * var(--r-density))
-mb-10margin-bottom:calc(-2.5rem * var(--r-density))
-mb-12margin-bottom:calc(-3rem * var(--r-density))
-mb-16margin-bottom:calc(-4rem * var(--r-density))
-mb-20margin-bottom:calc(-5rem * var(--r-density))
-mb-24margin-bottom:calc(-6rem * var(--r-density))
-mb-32margin-bottom:calc(-8rem * var(--r-density))
-mb-40margin-bottom:calc(-10rem * var(--r-density))
-mb-48margin-bottom:calc(-12rem * var(--r-density))
-mb-64margin-bottom:calc(-16rem * var(--r-density))
-ms-0margin-inline-start:0
-ms-1margin-inline-start:calc(-0.25rem * var(--r-density))
-ms-2margin-inline-start:calc(-0.5rem * var(--r-density))
-ms-3margin-inline-start:calc(-0.75rem * var(--r-density))
-ms-4margin-inline-start:calc(-1rem * var(--r-density))
-ms-5margin-inline-start:calc(-1.25rem * var(--r-density))
-ms-6margin-inline-start:calc(-1.5rem * var(--r-density))
-ms-8margin-inline-start:calc(-2rem * var(--r-density))
-ms-10margin-inline-start:calc(-2.5rem * var(--r-density))
-ms-12margin-inline-start:calc(-3rem * var(--r-density))
-ms-16margin-inline-start:calc(-4rem * var(--r-density))
-ms-20margin-inline-start:calc(-5rem * var(--r-density))
-ms-24margin-inline-start:calc(-6rem * var(--r-density))
-ms-32margin-inline-start:calc(-8rem * var(--r-density))
-ms-40margin-inline-start:calc(-10rem * var(--r-density))
-ms-48margin-inline-start:calc(-12rem * var(--r-density))
-ms-64margin-inline-start:calc(-16rem * var(--r-density))
-me-0margin-inline-end:0
-me-1margin-inline-end:calc(-0.25rem * var(--r-density))
-me-2margin-inline-end:calc(-0.5rem * var(--r-density))
-me-3margin-inline-end:calc(-0.75rem * var(--r-density))
-me-4margin-inline-end:calc(-1rem * var(--r-density))
-me-5margin-inline-end:calc(-1.25rem * var(--r-density))
-me-6margin-inline-end:calc(-1.5rem * var(--r-density))
-me-8margin-inline-end:calc(-2rem * var(--r-density))
-me-10margin-inline-end:calc(-2.5rem * var(--r-density))
-me-12margin-inline-end:calc(-3rem * var(--r-density))
-me-16margin-inline-end:calc(-4rem * var(--r-density))
-me-20margin-inline-end:calc(-5rem * var(--r-density))
-me-24margin-inline-end:calc(-6rem * var(--r-density))
-me-32margin-inline-end:calc(-8rem * var(--r-density))
-me-40margin-inline-end:calc(-10rem * var(--r-density))
-me-48margin-inline-end:calc(-12rem * var(--r-density))
-me-64margin-inline-end:calc(-16rem * var(--r-density))

306 unterstützte Basisklassen in dieser Gruppe.

Automatischer Abstand

Automatische Inline-Abstände eignen sich unter anderem zum Zentrieren oder zum Absetzen eines Elements.

Automatischer Abstand: Klassen und erzeugtes CSS
KlasseCSS
mx-automargin-inline:auto
ms-automargin-inline-start:auto

2 unterstützte Basisklassen in dieser Gruppe.

Gap

gap-* wirkt zwischen Flex-/Grid-Elementen, gap-x-* nur zwischen Spalten und gap-y-* nur zwischen Zeilen.

Gap: Klassen und erzeugtes CSS
KlasseCSS
gap-0gap:0
gap-x-0column-gap:0
gap-y-0row-gap:0
gap-1gap:calc(0.25rem * var(--r-density))
gap-x-1column-gap:calc(0.25rem * var(--r-density))
gap-y-1row-gap:calc(0.25rem * var(--r-density))
gap-2gap:calc(0.5rem * var(--r-density))
gap-x-2column-gap:calc(0.5rem * var(--r-density))
gap-y-2row-gap:calc(0.5rem * var(--r-density))
gap-3gap:calc(0.75rem * var(--r-density))
gap-x-3column-gap:calc(0.75rem * var(--r-density))
gap-y-3row-gap:calc(0.75rem * var(--r-density))
gap-4gap:calc(1rem * var(--r-density))
gap-x-4column-gap:calc(1rem * var(--r-density))
gap-y-4row-gap:calc(1rem * var(--r-density))
gap-5gap:calc(1.25rem * var(--r-density))
gap-x-5column-gap:calc(1.25rem * var(--r-density))
gap-y-5row-gap:calc(1.25rem * var(--r-density))
gap-6gap:calc(1.5rem * var(--r-density))
gap-x-6column-gap:calc(1.5rem * var(--r-density))
gap-y-6row-gap:calc(1.5rem * var(--r-density))
gap-8gap:calc(2rem * var(--r-density))
gap-x-8column-gap:calc(2rem * var(--r-density))
gap-y-8row-gap:calc(2rem * var(--r-density))
gap-10gap:calc(2.5rem * var(--r-density))
gap-x-10column-gap:calc(2.5rem * var(--r-density))
gap-y-10row-gap:calc(2.5rem * var(--r-density))
gap-12gap:calc(3rem * var(--r-density))
gap-x-12column-gap:calc(3rem * var(--r-density))
gap-y-12row-gap:calc(3rem * var(--r-density))
gap-16gap:calc(4rem * var(--r-density))
gap-x-16column-gap:calc(4rem * var(--r-density))
gap-y-16row-gap:calc(4rem * var(--r-density))
gap-20gap:calc(5rem * var(--r-density))
gap-x-20column-gap:calc(5rem * var(--r-density))
gap-y-20row-gap:calc(5rem * var(--r-density))
gap-24gap:calc(6rem * var(--r-density))
gap-x-24column-gap:calc(6rem * var(--r-density))
gap-y-24row-gap:calc(6rem * var(--r-density))
gap-32gap:calc(8rem * var(--r-density))
gap-x-32column-gap:calc(8rem * var(--r-density))
gap-y-32row-gap:calc(8rem * var(--r-density))
gap-40gap:calc(10rem * var(--r-density))
gap-x-40column-gap:calc(10rem * var(--r-density))
gap-y-40row-gap:calc(10rem * var(--r-density))
gap-48gap:calc(12rem * var(--r-density))
gap-x-48column-gap:calc(12rem * var(--r-density))
gap-y-48row-gap:calc(12rem * var(--r-density))
gap-64gap:calc(16rem * var(--r-density))
gap-x-64column-gap:calc(16rem * var(--r-density))
gap-y-64row-gap:calc(16rem * var(--r-density))

51 unterstützte Basisklassen in dieser Gruppe.

Individuell kombinieren

Klassen lassen sich mit Komponenten, eigenen CSS-Regeln und den gemeinsamen --r-*-Variablen kombinieren. Dichte und Schriftgröße bleiben unabhängig. Die Syntax frei formulierter Klassen wie p-[13px] ist noch nicht implementiert.

Zur durchsuchbaren Gesamtübersicht · Farben und eigene Variablen