Margin

In der Karte sind der Name, das Alter, die Beschreibung und der Button zusammengequetscht, ohne Platz dazwischen. Der Abstand zwischen Elementen ist der Außenabstand (Margin), der Platz außerhalb des Rahmens. Seine Klassen funktionieren genau wie die fürs Padding, nur mit m statt p:

Eine Gewohnheit, die vieles einfach hält: Zwischen untereinanderstehenden Elementen entsteht der Abstand nur von einer Seite, zum Beispiel immer mit einem oberen Margin (mt-*). Dann musst du nie überlegen, was passiert, wenn zwei Margins aufeinandertreffen. (Wie du im CSS-Kurs gesehen hast, fallen die vertikalen Margins benachbarter Elemente zusammen, und die Lücke ist nur so groß wie der größere von ihnen.)

In der Karte gehören der Name und das Alter zusammen, sie bleiben also nah beieinander. Die Beschreibung bekommt mehr Platz und der Button am meisten, damit er sich vom Text absetzt.

Preflight hat auch den Margin von 8 Pixeln an body entfernt, weshalb die Karte an den Rändern der Vorschau klebt. Wir geben der Seite Padding: Platz innerhalb von body, zwischen dem Fensterrand und dem Inhalt.

Tipp: Die Abstände siehst du mit Untersuchen, wie im CSS-Kurs: Klicke in der Vorschau mit der rechten Maustaste auf ein Element, wähle Untersuchen und fahre in den Entwicklertools mit der Maus über das Element. Der Browser zeigt sein Padding und seinen Margin in verschiedenen Farben.