Die Abstandsskala

In der letzten Lektion hast du den Seiten des Tierheims Farben und schön gestalteten Text gegeben. In dieser Lektion gibst du ihnen Luft zum Atmen: Platz in Elementen und zwischen ihnen sowie die richtigen Breiten und Höhen.

Auf der Seite gibt es eine Vermittlungskarte für Luna. Sie hat schon Klassen aus der letzten Lektion: einen orangen Namen, grauen Text, eine weiße Karte auf hellgrauer Seite und einen orangen Button mit weißem Text. Aber alles ist zusammengedrängt: Der Text stößt an den Rand der Karte, die Karte an den Rand der Vorschau, und der Button sitzt eng um seinen Text.

Das ist Preflights Werk. Die Basisstile von Tailwind haben alle Margins und Paddings entfernt, die Browser Elementen geben: die Lücken um Überschriften und Absätze, die 8 Pixel um body und das Padding in Buttons. Es entsteht also kein Platz aus Versehen: Du fügst jeden selbst mit Klassen hinzu. Fangen wir mit dem Padding an, dem Abstand zwischen dem Inhalt eines Elements und seinem Rahmen.

Die Klasse p-4 gibt einem Element Padding an allen vier Seiten. Ihre Zahl ist keine Angabe in Pixeln, sondern eine Anzahl von Stufen auf der Abstandsskala von Tailwind. Eine Stufe ist 0.25rem, also 4 Pixel (bei der üblichen Basisschriftgröße von 16 Pixeln), p-4 sind also 4 × 4 = 16 Pixel:

.p-4 {
	padding: 1rem; /* = 16 px */
}

(Im CSS, das Tailwind erzeugt, siehst du padding: calc(var(--spacing) * 4): die Größe einer Stufe, in einer Variable namens --spacing gespeichert, mal 4. Es bedeutet dasselbe.) Diese Stufen verwendest du am häufigsten:

Jede ganze Zahl funktioniert (p-5 sind 20 Pixel, p-10 40 Pixel), und für kleine Abstände auch halbe (p-0.5 sind 2 Pixel, p-1.5 6 Pixel). Ein häufiger Fehler ist, Pixel zu schreiben: p-24 sind nicht 24 Pixel, sondern 24 Stufen, also 96 Pixel.

Warum Stufen und nicht einfach beliebige Pixelwerte? Eine Seite sieht aufgeräumt aus, wenn sich ihre Abstände wiederholen. Wenn du aus wenigen Größen wählst, etwa 8, 16, 24 und 32 Pixeln, richten sich die Karten, Buttons und Kästen der ganzen Seite aneinander aus und wirken zusammengehörig, und du musst nicht jedes Mal zwischen 15, 16 oder 17 Pixeln entscheiden. Auch Designer arbeiten mit solchen Skalen. Und dieselbe Skala gilt für Margins, Breiten und Höhen, die du in dieser Lektion kennenlernst.