Kursinhalt
Tailwind CSS für Webentwicklung
Tailwind CSS für Webentwicklung
Abstandswerkzeuge
Du machst einen fantastischen Job!
Richtige Abstände sind entscheidend für die Erstellung von optisch ansprechenden und gut strukturierten Layouts. Zuvor haben wir Margin- und Padding-Utility-Klassen verwendet, aber lassen Sie uns näher darauf eingehen.
Margin
Margin-Utilities in Tailwind CSS ermöglichen es Ihnen, den Abstand um Elemente herum zu steuern. Sie können mit dem Präfix m-, gefolgt von einem Größenwert, angewendet werden. Sie können Margen auf alle Seiten oder auf bestimmte Seiten (oben, rechts, unten, links) mit den jeweiligen Präfixen (mt-, mr-, mb-, ml-) anwenden.
Beispiele
| Margin-Klasse | Beschreibung |
|---|---|
m-4 | Wendet einen Rand von 1rem (16px) auf alle Seiten an. |
mt-2 | Wendet einen Rand von 0.5rem (8px) auf die obere Seite an. |
mr-6 | Wendet einen Rand von 1.5rem (24px) auf die rechte Seite an. |
mb-1 | Wendet einen Rand von 0.25rem (4px) auf die untere Seite an. |
ml-3 | Wendet einen Rand von 0.75rem (12px) auf die linke Seite an. |
index.html
Padding
Padding-Utilities in Tailwind CSS sind ähnlich wie die Margin-Utility-Klassen, und die Logik bleibt dieselbe.
Sie können mit dem Präfix p- gefolgt von einem Größenwert angewendet werden. Sie können Padding auf alle Seiten oder auf bestimmte Seiten (oben, rechts, unten, links) mit den jeweiligen Präfixen (pt-, pr-, pb-, pl-) anwenden.
Beispiele
| Padding-Klasse | Beschreibung |
|---|---|
p-4 | Wendet ein Padding von 1rem (16px) auf alle Seiten an. |
pt-2 | Wendet ein Padding von 0.5rem (8px) auf die obere Seite an. |
pr-6 | Wendet ein Padding von 1.5rem (24px) auf die rechte Seite an. |
pb-1 | Wendet ein Padding von 0.25rem (4px) auf die untere Seite an. |
pl-3 | Wendet ein Padding von 0.75rem (12px) auf die linke Seite an. |
index.html
Horizontale und Vertikale Abstände
Zusätzlich können wir Margen/Abstände auf die horizontale (_x-) oder vertikale (_y-) Achse anwenden.
Beispiele
| Klasse | Beschreibung |
|---|---|
mx-4 | Wendet einen Rand von 1rem (16px) auf die linke und rechte Seite an. |
my-4 | Wendet einen Rand von 1rem (16px) auf die obere und untere Seite an. |
px-4 | Wendet einen Abstand von 1rem (16px) auf die linke und rechte Seite an. |
py-4 | Wendet einen Abstand von 1rem (16px) auf die obere und untere Seite an. |
index.html
1. Welche Klasse wendet einen Rand von 1rem (16px) auf alle Seiten eines Elements an?
2. Wie wendet man einen Abstand von 0,5rem (8px) auf die obere Seite eines Elements an?
3. Welche Tailwind CSS-Klassen werden verwendet, um einen Rand von 2rem (32px) auf die obere und untere Seite eines Elements anzuwenden?
Danke für Ihr Feedback!
