Die vier Ringe

Jedes Element im Browser ist ein Kasten. Auch ein Wort in einem Absatz, auch ein Bild, auch die Seite selbst. Und jeder dieser Kästen hat vier Ringe, die von innen nach außen aufeinander sitzen.

Das ist nicht bloß Theorie für später. Die Hälfte aller Momente, in denen ein Layout überraschend aussieht, erklärt sich damit, dass einer dieser vier Ringe woanders liegt, als man dachte.

01 / 04Von innen nach außen

Der Inhalt ist das, was tatsächlich im Element steht: Text, ein Bild, weitere Elemente.

Der Innenabstand (padding) liegt zwischen Inhalt und Rahmen. Er ist die Luft im Kasten.

Der Rahmen (border) ist die Linie um den Kasten herum.

Der Außenabstand (margin) liegt außerhalb des Rahmens und hält die Nachbarn auf Abstand.

<div class="huelle">
  <div class="kasten">Der Inhalt</div>
</div>

.kasten {
  /* 1. der Inhalt selbst */
  background-color: #dbeafe;

  /* 2. Innenabstand, noch innerhalb des Hintergrunds */
  padding: 24px;

  /* 3. der Rahmen */
  border: 6px solid #2563eb;

  /* 4. Außenabstand, außerhalb von allem */
  margin: 24px;
}

/* Nur damit du siehst, wo der Außenabstand liegt:
   hier scheint das Gelb der Hülle durch. Das
   display: flow-root hält die senkrechten Abstände
   des Kastens bei ihr fest. Ohne die Zeile bräche er
   oben und unten auch aus der Hülle aus, und dort
   wäre gar kein Gelb zu sehen. Warum das so ist,
   steht in Lektion 4.4. */
.huelle {
  display: flow-root;
  background-color: #fef9c3;
}

Auf der Seite kannst du alle vier auseinanderhalten: der Text ist der Inhalt, das Hellblau drumherum ist der Innenabstand, die dicke blaue Linie der Rahmen, und das Gelb außen ist der Bereich, den der Außenabstand freihält.

Diese Farben sind ein Trick, sie stehen im Stylesheet des Beispiels. Auf einem breiten Bildschirm kommst du auch ohne den Trick an dieselbe Auskunft. In der Browser-Leiste sitzt ein Fadenkreuz; schalt es ein, dann erscheint unter der Seite ein Streifen. Fährst du jetzt über den Kasten, liegen vier Flächen darüber, von außen nach innen Außenabstand, Rahmen, Innenabstand und Inhalt, und im Streifen stehen die Zahlen dazu: margin auf 24px, padding auf 24px, border auf 6px solid rgb(37, 99, 235). Dieselben Werte, die oben im CSS stehen, nur eben am fertigen Kasten abgelesen und der Rahmen samt seiner Farbe.

Das Werkzeug heißt Inspector, der Streifen darunter Auskunftsstreifen, und beide begleiten dich durch den ganzen Kurs. Die vier Farben sind übrigens nicht ausgedacht: fast jeder Browser malt das Boxmodell so, du wirst sie wiedererkennen. Auf einem schmalen Bildschirm gibt es das Fadenkreuz nicht, dort bleibt der Trick mit dem Gelb.

Spiel ruhig mit den Zahlen. Setz padding auf 0 und schau, wie eng der Text am Rahmen klebt. Setz margin auf 0 und der gelbe Streifen verschwindet.

02 / 04Die Uhrzeigerregel

padding und margin sind Kurzschreibweisen, und je nachdem wie viele Werte du hinschreibst, bedeuten sie etwas anderes.

Ein Wert gilt für alle vier Seiten. Zwei Werte meinen erst oben und unten, dann links und rechts. Drei Werte meinen oben, dann links und rechts, dann unten. Vier Werte laufen im Uhrzeigersinn: oben, rechts, unten, links.

<div class="kasten eins">Ein Wert: überall gleich</div>
<div class="kasten zwei">Zwei Werte: oben und unten, dann links und rechts</div>
<div class="kasten drei">Drei Werte: oben, links und rechts, unten</div>
<div class="kasten vier">Vier Werte: oben, rechts, unten, links</div>

.kasten {
  background-color: #dbeafe;
  margin-bottom: 8px;
}

.eins {
  padding: 16px;
}

.zwei {
  padding: 8px 32px;
}

.drei {
  padding: 8px 32px 24px;
}

.vier {
  padding: 8px 32px 24px 4px;
}

Die Vierer-Variante merkt man sich am besten als Uhrzeiger, der bei zwölf startet. Die Zweier-Variante ist im Alltag die häufigste, weil senkrecht und waagerecht fast immer verschiedene Werte brauchen.

Wenn nur eine Seite anders sein soll, schreib die Einzelseite hin: padding-top, margin-bottom, border-left. Das liest sich später besser als eine Vierer-Reihe, in der man abzählen muss, welche Zahl wohin gehört.

03 / 04Innen färbt mit, außen nicht

Der wichtigste Unterschied zwischen Innen- und Außenabstand ist nicht die Richtung, sondern ihr Verhältnis zum Hintergrund.

<div class="kasten mit-innen">24px Innenabstand</div>
<div class="kasten mit-aussen">24px Außenabstand</div>

.kasten {
  background-color: #2563eb;
  color: #ffffff;
}

/* Die blaue Fläche wird größer. */
.mit-innen {
  padding: 24px;
}

/* Die blaue Fläche bleibt exakt gleich groß,
   sie rückt nur von ihren Nachbarn ab. Bewusst nur
   oben und unten: ein waagerechter Außenabstand ginge
   bei einem Block ohne eigene Breite von der Fläche
   ab, und dann wäre sie eben doch schmaler. */
.mit-aussen {
  margin: 24px 0;
}

Beide Kästen bekommen 24 Pixel Abstand, und sie sehen völlig verschieden aus. Der Hintergrund reicht bis zum Rahmen, also unter den Innenabstand, aber nie unter den Außenabstand.

Daraus folgt eine Faustregel, die dir viel Herumprobieren erspart: Willst du, dass die Fläche größer wird, nimm padding. Willst du Abstand zu etwas anderem, nimm margin.

04 / 04Wann padding, wann margin

Ein Knopf mit 12px Innenabstand ist größer und leichter zu treffen. Derselbe Knopf mit 12px Außenabstand ist genauso klein wie vorher und hat nur mehr Platz um sich.

Für Komponenten gilt deshalb: Innenabstand gehört nach innen zur Komponente, Außenabstand regelt das Verhältnis zu den Nachbarn. Eine Karte weiß, wie viel Luft sie innen braucht. Wie viel Platz zwischen zwei Karten liegt, weiß dagegen die Liste, in der sie stehen.

Beim Außenabstand kommt gleich noch eine Überraschung dazu, die niemand erwartet: senkrechte Außenabstände addieren sich nicht, sie fallen zusammen. Das ist Lektion 4.4, und bis dahin gilt die Empfehlung, Abstände nur in eine Richtung zu setzen, meistens nach unten.