Die vier Ringe

Zwei Kästen mit 24 Pixeln Abstand können völlig verschieden aussehen. Es kommt darauf an, wo die 24 Pixel liegen. Jedes Element im Browser erzeugt einen Kasten, ein strong mitten im Satz genauso wie ein Bild oder die Seite selbst, und ausgenommen ist nur ein Element, das gar nicht dargestellt wird. Dazu mehr am Ende dieses Abschnitts. Und jeder dieser Kästen hat vier Ringe, die von innen nach außen aufeinander sitzen.

01 / 04Von innen nach außen

Der Inhalt ist das, was tatsächlich im Element steht, also Text, ein Bild oder 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.

Die Farben sind allerdings ein Trick, sie stehen so im Stylesheet. Auf einem breiten Bildschirm siehst du dasselbe auch ohne Trick. Im Inspector liegen über dem Kasten vier Flächen, von außen nach innen Außenabstand, Rahmen, Innenabstand und Inhalt. Im Auskunftsstreifen stehen die Zahlen dazu, also margin auf 24px, padding auf 24px und border auf 6px solid rgb(37, 99, 235). Das sind die Werte aus dem CSS, nur am fertigen Kasten abgelesen, und beim Rahmen steht die Farbe gleich mit dabei.

Die vier Farben sind übrigens nicht ausgedacht. Die Entwicklerwerkzeuge von Chrome und Edge malen das Box-Modell in denselben Tönen, Firefox nimmt andere. Auf einem schmalen Bildschirm gibt es keinen Inspector. Da bleibt nur der Trick mit dem Gelb.

Setzt du padding: 0, klebt der Text eng am Rahmen. Mit margin: 0 verschwindet die gelbe Fläche.

border ist ein Shorthand, also eine Kurzschreibweise für mehrere Eigenschaften in einer Zeile. Die einzelnen heißen Longhands, hier border-width, border-style und border-color. In der kurzen Zeile steckt allerdings eine Falle.

<div class="kasten ohne-stil">border: 6px #2563eb</div>
<div class="kasten mit-stil">border: 6px solid #2563eb</div>

.kasten {
  padding: 24px;
  margin-bottom: 16px;
  background-color: #dbeafe;
}

/* Breite und Farbe, aber kein Stil. */
.ohne-stil {
  border: 6px #2563eb;
}

.mit-stil {
  border: 6px solid #2563eb;
}

Am oberen Kasten ist kein Rahmen zu sehen, obwohl Breite und Farbe stimmen. border nimmt Breite, Stil und Farbe, und ohne Stil gibt es keinen Rahmen. Der Stil steht von Haus aus auf none, und ein Rahmen mit none ist null Pixel breit. Im Auskunftsstreifen steht am oberen Kasten border: 0px none rgb(37, 99, 235). Die Farbe ist also angekommen, die sechs Pixel nicht. Welche Stile es gibt, kommt in Lektion 7.3.

02 / 04Die Uhrzeigerregel

padding und margin sind ebenfalls Shorthands. Was sie bedeuten, hängt davon ab, wie viele Werte dastehen.

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 läuft wie ein Uhrzeiger, der bei zwölf startet. Im Alltag kommt die Zweier-Variante am häufigsten vor, denn senkrecht und waagerecht brauchen oft verschiedene Werte.

Soll nur eine Seite anders sein, schreibe ich die Einzelseite hin, also padding-top, margin-bottom oder border-left. Das liest sich später besser als eine Vierer-Reihe, bei der du erst abzählen musst, welche Zahl wohin gehört.

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

Innen- und Außenabstand unterscheiden sich vor allem darin, ob der Hintergrund mitkommt.

<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. Beim oberen wird die blaue Fläche größer, der untere rückt nur von seinen Nachbarn ab. Der Hintergrund reicht nämlich bis unter den Rahmen und liegt damit auch unter dem Innenabstand, aber nie unter dem Außenabstand.

Ich nehme deshalb padding, wenn die Fläche größer werden soll, und margin, wenn Abstand zu etwas anderem gemeint ist.

04 / 04Wann padding, wann margin

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

Bei Komponenten gehört der Innenabstand deshalb zur Komponente selbst. Wie viel Luft eine Karte innen braucht, entscheidet man an der Karte. Wie viel Platz zwischen zwei Karten liegt, gehört dagegen zur Liste, in der sie stehen, und das regelt der Außenabstand.

Beim Außenabstand kommt noch etwas dazu. Senkrechte Außenabstände addieren sich nicht, sie fallen zusammen. Darum geht es in Lektion 4.4. Bis dahin setze ich Abstände nur in eine Richtung, meistens nach unten.

In der Aufgabe bekommen zwei Karten ihren Kasten, mit Luft innen, einem Rahmen und Abstand nach unten.