Übung 1: Zwei Absätze, ein Abstand – zusammenfallende Außenabstände

Hinweise

Lösung

.a { margin-bottom: 24px; }
.b { margin-top: 0; }

Warum zweimal 24 nicht 24 ergibt

Im normalen Fluss fallen die senkrechten Außenabstände zweier benachbarter Blöcke zusammen: Aus dem unteren Abstand der ersten und dem oberen der zweiten Box wird nicht die Summe, sondern der größere der beiden Werte. Zwei mal 24 Pixel ergeben also 24, nicht 48. Wer den Effekt kennt, rechnet damit – und stolpert genau dann, wenn er ausbleibt.

In dieser Aufgabe bleibt er aus, weil die zweite Box umflossen ist. Ein Float ist aus dem normalen Fluss genommen, und das Zusammenfallen ist eine Regel des normalen Flusses; sie greift nur zwischen Boxen, die beide darin stehen. Das Ergebnis sind zwei getrennte Abstände, die sich addieren.

Dieselbe Aufhebung gilt für absolut positionierte Elemente, für Inline-Blöcke, für Tabellenzellen und für jedes Element, das einen eigenen Block-Formatierungskontext eröffnet. Umgekehrt heißt das: Wo Abstände unerwartet zusammenfallen, hilft es, eine der Boxen zu einem eigenen Kontext zu machen; wo sie unerwartet nicht zusammenfallen, lohnt der Blick darauf, ob eine der beiden aus dem Fluss genommen wurde.

Die Regeln des Zusammenfallens

Zusammenfallen betrifft ausschließlich senkrechte Abstände; waagerechte addieren sich immer. Es tritt in drei Konstellationen auf: zwischen benachbarten Geschwistern, zwischen einem Elternelement und seinem ersten oder letzten Kind, und bei einer leeren Box zwischen deren eigenem oberen und unterem Abstand.

Die zweite Konstellation ist die verwirrendste: Ein oberer Abstand am ersten Kind schlägt durch die Oberkante des Elternelements hindurch und schiebt das Elternelement mit nach unten, statt innen Platz zu schaffen. Verhindert wird das durch alles, was zwischen beide Kanten tritt – ein Innenabstand, ein Rahmen, oder ein eigener Formatierungskontext am Elternelement.

Bei zwei zusammenfallenden Abständen gewinnt der größere. Ist einer negativ, wird er vom positiven abgezogen; sind beide negativ, gilt der betragsmäßig größere. Nachzulesen ist das vollständig im Kapitel über das Box-Modell, und der Box-Modell-Visualizer zeigt die vier Schichten einzeln.

Warum man Abstände nur auf einer Seite setzt

Aus dem Verhalten folgt eine Gewohnheit, die in großen Stylesheets viel Ärger erspart: Abstände zwischen Elementen werden konsequent nur in eine Richtung gesetzt – üblicherweise nach unten. Dann gibt es nie zwei Werte, die miteinander verhandeln müssen, und der Abstand zwischen zwei beliebigen Elementen ist immer der, der am oberen steht.

Die moderne Alternative macht die Frage ganz gegenstandslos: In einem Flex- oder Grid-Container erzeugt gap den Zwischenraum, und Zwischenräume fallen grundsätzlich nicht zusammen. Wo eine Liste gleichartiger Elemente untereinander steht, ist das heute der bessere Weg – zumal er nur an einer Stelle notiert wird und nicht an jedem Kind.

Für diese Aufgabe reicht die kleinere Lösung: einen der beiden Werte auf null setzen. Welchen, ist gleichgültig; der Prüfer misst den Abstand zwischen den Kanten und akzeptiert beide Wege.

Negative Abstände und der Sonderfall der leeren Box

Außenabstände dürfen negativ sein, Innenabstände nicht. Ein negativer Wert zieht die Box in die betreffende Richtung und verkleinert den Platz, den sie im Fluss beansprucht – zwei Boxen lassen sich damit überlappen, ohne dass eine von ihnen positioniert werden müsste. Beim Zusammenfallen wird ein negativer Wert vom positiven abgezogen; treffen zwei negative aufeinander, gilt der betragsmäßig größere.

Der dritte Fall des Zusammenfallens betrifft eine Box, die selbst keinen Inhalt, keine Höhe, keinen Rahmen und keinen Innenabstand hat: Bei ihr fallen der eigene obere und der eigene untere Abstand miteinander zusammen, und die Box verschwindet praktisch aus der Rechnung. Ein leeres Element als Abstandhalter funktioniert deshalb nicht so, wie man erwartet – es sei denn, man gibt ihm eine Höhe.

In der Praxis begegnet einem das bei erzeugten Listen, in denen ein Eintrag leer bleiben kann, und bei Containern, die nur unter einer Bedingung Inhalt bekommen. Wo der Abstand verlässlich sein muss, ist er deshalb besser am Nachbarn aufgehoben als an einem eigenen Element – oder man nimmt gleich gap, das von alledem nicht betroffen ist.

Der Prüfer misst hier den Abstand zwischen den beiden Kanten und nicht die notierten Werte. Damit ist offen, welchen der beiden Abstände man auf null setzt – und ebenso zulässig wäre, beide auf zwölf Pixel zu setzen. Genau diese Offenheit ist beabsichtigt: Die Aufgabe fragt nach dem Verständnis der Rechnung, nicht nach einer bestimmten Schreibweise.

Fragen zur Übung