Zusammenfassung

In dieser Lektion haben wir gelernt:

• Preflight entfernt die Margins und Paddings, die Browser Elementen geben, du fügst also jeden Abstand selbst hinzu.
• Die Abstandsskala von Tailwind hat Stufen von 0,25rem, also 4 Pixeln: p-1 sind 4 Pixel, p-4 16 und p-8 32. Wer aus wenigen Stufen wählt, hält die Abstände der ganzen Seite einheitlich.
• p-* setzt das Padding an allen Seiten, px-* links und rechts, py-* oben und unten, und pt-*, pr-*, pb-* und pl-* an einer einzelnen Seite.
• Margins funktionieren genauso mit m: m-*, mx-*, my-*, mt-*, mr-*, mb-* und ml-*. Zwischen untereinanderstehenden Elementen ist es am einfachsten, den Abstand nur von einer Seite zu erzeugen, zum Beispiel mit mt-*.
• Die Reihenfolge der Klassen in class spielt keine Rolle: Eine Klasse für eine Seite (pt-8) gewinnt gegen eine Klasse für alle Seiten (p-4). Gib einem Element nicht zwei Klassen für dasselbe.
• w-* und h-* setzen Breite und Höhe auf derselben Skala (w-64 sind 256 Pixel). w-full ist die Breite des Elternelements, Brüche wie w-1/2 ein Anteil davon, und w-screen und h-screen die Größe des Fensters.
• max-w-sm, max-w-md und die anderen setzen eine maximale Breite, das Element schrumpft also auf schmalen Bildschirmen. Zusammen mit mx-auto ergeben sie eine zentrierte Spalte, wie unsere Karte.
• Höhen überlässt man meist am besten dem Inhalt. min-h-screen macht ein Element mindestens so hoch wie das Fenster.
• size-* setzt Breite und Höhe zugleich, und auch leading-* nimmt Zahlen der Skala.
• In eckigen Klammern kannst du jeden CSS-Wert schreiben, etwa bg-[#fdf6ec] oder w-[350px] (beliebige Werte), ohne Leerzeichen. Verwende sie nur als Ausnahme: Die Skala und die Palette halten die Seite einheitlich.
• Die Leiste Vorschaubreite zeigt die Seite so breit wie ein Smartphone (375 px) oder ein Computerbildschirm.

Lunas Karte hat jetzt Platz in sich und um sich herum und eine sinnvolle Breite, und sie bleibt auf jedem Bildschirm in der Mitte der Seite. Als Nächstes kommt ein kleines Projekt, in dem du eine ganze Seite allein gestaltest, mit allem aus den ersten drei Lektionen. Danach gibst du in der Lektion Rahmen, Schatten und Bilder Karten wie dieser Rahmen, abgerundete Ecken, Schatten und ein Bild.

Zum Üben haben wir unter der Karte einen Hinweis mit der Adresse des Tierheims hinzugefügt. Gib ihm mit dem, was du in dieser Lektion gelernt hast, Platz und eine Breite.