Padding auf einer Seite

Der Button sitzt noch immer eng um seinen Text: Luna adoptieren. Buttons brauchen meist links und rechts mehr Platz als oben und unten: Luna adoptieren. Eine Klasse p-* setzt alle vier Seiten gleich, für Richtungen und einzelne Seiten hat Tailwind deshalb weitere Padding-Klassen:

Die Buchstaben stehen für englische Wörter: t für top (oben), r für right (rechts), b für bottom (unten) und l für left (links). x und y sind die Achsen, die du aus der Mathematik kennst: x ist waagerecht (links und rechts) und y senkrecht (oben und unten). (Tailwind schreibt px-4 eigentlich als padding-inline: 1rem und py-4 als padding-block: 1rem. In Sprachen, die von links nach rechts geschrieben werden, ist das Padding links und rechts sowie oben und unten.)

Klassen lassen sich kombinieren: p-4 pt-8 gibt einem Element an jeder Seite 16 Pixel, nur oben bekommt es 32. Die Klasse für die einzelne Seite gewinnt unabhängig von der Reihenfolge der Klassen, weil Tailwind in seinem CSS die Regeln für einzelne Seiten nach der Regel für alle Seiten setzt und von zwei gleich spezifischen Regeln die spätere gewinnt, wie du es aus der Kaskade kennst. (Die Reihenfolge der Klassen im Attribut class spielt nie eine Rolle.) Aber wie du in der letzten Lektion gesehen hast: Gib einem Element nicht zwei Klassen für dasselbe, etwa p-4 p-6, denn am HTML erkennst du nicht, welche gewinnt.