Boxen und Abstände · Code mit Martin

Entdecke das größte CSS-Geheimnis: Alles auf einer Seite ist eine Box. Und lerne, sie zu verschieben.

Zeig mir das: alles ist eine Box

Hier ist das größte Geheimnis im Webdesign: Jedes einzelne Ding auf einer Seite ist eine rechteckige Box. Eine Überschrift, ein Absatz, ein Bild, ein Menü – alles. Wenn du das siehst, ergibt CSS plötzlich Sinn.

Jede Box hat drei Arten von Abstand:

        margin (outer space)
      ┌─────────────────────────┐
      │  border (frame)         │
      │  ┌───────────────────┐  │
      │  │ padding (cushion) │  │
      │  │  ┌─────────────┐  │  │
      │  │  │   CONTENT   │  │  │
      │  │  └─────────────┘  │  │
      │  └───────────────────┘  │
      └─────────────────────────┘

padding – das Polster: Abstand zwischen Inhalt und Rahmen (innerhalb der Box)
border – der Rahmen der Box
margin – Abstand zwischen der Box und ihren Nachbarn (außerhalb der Box)

.card {
  padding: 16px;        /* cushion on all sides */
  border: 2px solid gray;
  margin: 20px 0;       /* 20px top and bottom, 0 on the sides */
  border-radius: 12px;
}

Zeig mir das: eine Seite wie Profis sie bauen

Das kennst du von echten Websites – der Inhalt spannt sich nicht über den ganzen breiten Bildschirm, sondern bleibt in einer angenehmen Spalte in der Mitte. Drei Zeilen CSS machen das:

main {
  max-width: 700px;   /* content will never be wider than 700px */
  margin: 0 auto;     /* auto on the sides = center it */
  padding: 0 16px;     /* on mobile, text won't be glued to the edge */
}

margin: 0 auto ist eine Zauberformel: null oben und unten, „automatisch gleich” an den Seiten – also zentriert. Fast jede Website der Welt nutzt diese Regel.

Und zähmen wir Bilder, damit sie nie aus der Seite quellen:

img {
  max-width: 100%;      /* never wider than the column */
  height: auto;         /* height adjusts automatically, so the photo doesn't squish */
  border-radius: 12px;  /* rounded corners suit every photo */
}

Jetzt du 💪

Diese Aufgabe ist für jedes Projekt gleich – ein universelles Outfit für jede Website:

Zentriere deinen Inhalt: die max-width + margin: 0 auto-Regel auf main.
Zähme deine Bilder mit der img-Regel aus dem Beispiel.
Verbessere dein Badge aus der letzten Lektion: füge margin hinzu, damit es Luft hat.
Lass die Seite atmen: füge body { line-height: 1.6; } hinzu – Textzeilen verteilen sich schön.

Komplette Lösung (funktioniert für jedes Projekt)

Füge das zu style.css hinzu:

body {
  line-height: 1.6;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

Und zu deinem Badge (deins heißt vielleicht .news, .favorite, .tip oder .win) diese Zeile:

  margin: 20px 0;

💡

Probier, die Boxen sichtbar zu machen! Füge kurz diese Regel in dein CSS ein: * { border: 1px solid red; } – der Stern bedeutet „absolut alles”. Plötzlich siehst du jede Box auf der Seite. Dann wieder löschen, aber merk dir den Blick: so sieht der Browser deine Seite.

✅

Kontrolliere dich selbst: Dein Inhalt sitzt in einer angenehmen zentrierten Spalte, Fotos haben abgerundete Ecken und quellen nirgends über, Text ist gut lesbar. Verkleinere das Browserfenster – der Inhalt passt sich an. Deine Website sieht plötzlich eine Klasse besser aus.

Das nimmst du aus dieser Lektion mit

Alles auf einer Seite ist eine Box mit padding (innen), border (Rahmen) und margin (außen).
max-width + margin: 0 auto = eine zentrierte Inhaltsspalte, wie bei echten Websites.
img { max-width: 100%; } – Fotos quellen nie über.