Übung 4: Eine Box exakt 300 Pixel breit machen – mit Innenabstand und Rahmen

Hinweise

Lösung

.box { width: 256px; }

Wovon width in CSS 2.1 spricht

Im Box-Modell von CSS 2.1 bezeichnet width die Breite des Inhalts. Innenabstand, Rahmen und Außenabstand kommen hinzu. Eine Box mit 300 Pixeln Breite, 20 Pixeln Innenabstand auf jeder Seite und zwei Pixeln Rahmen misst von Rahmenaußenkante zu Rahmenaußenkante deshalb 344 Pixel: 300 plus zweimal 20 plus zweimal 2.

Das ist keine Eigenheit, sondern die ausdrückliche Festlegung der Spezifikation, und sie ist von der Rechnung her sauber: Jede Schicht liegt um die vorherige herum, keine überlappt. Unpraktisch wird sie erst, wenn die Außenbreite die feste Größe ist – bei einer Spalte in einem Raster, bei einer Karte in einer Reihe, bei allem, was sich einen verfügbaren Platz teilt.

Wer im Modell von CSS 2.1 bleiben will, rechnet rückwärts: gewünschte Außenbreite minus zweimal Innenabstand minus zweimal Rahmenbreite. In dieser Aufgabe sind das 300 minus 40 minus 4, also 256.

Der Schalter, der die Rechnung umdreht

Die Eigenschaft box-sizing mit dem Wert border-box ändert, worauf sich width bezieht: auf die Außenkante des Rahmens. Innenabstand und Rahmen werden dann von innen abgezogen, der Inhalt wird schmaler, die Box bleibt so breit wie angegeben. Der Außenabstand bleibt in beiden Zählweisen außen vor.

Damit ist width: 300px die zweite richtige Lösung dieser Aufgabe, und der Prüfer nimmt sie an, weil er die Außenbreite misst und nicht den Quelltext liest. Der Vorteil liegt auf der Hand: Ändert sich der Innenabstand, muss die Breite nicht nachgerechnet werden.

Viele Stylesheets stellen die Zählweise deshalb im Kopf für alle Elemente um. Das ist kein Verstoß gegen CSS 2.1, sondern eine spätere Ergänzung, die den älteren Ausgangswert unangetastet lässt. Wer altes und neues CSS mischt, sollte allerdings wissen, welche der beiden gerade gilt – der Box-Modell-Visualizer zeigt beide Rechnungen nebeneinander.

Wo die Rechnung ganz entfällt

Ohne Breitenangabe stellt sich die Frage nicht. Ein Block im normalen Fluss nimmt von sich aus den verfügbaren Platz ein, und Innenabstand und Rahmen gehen von innen ab – die Box ragt also nie heraus, egal wie viel Polsterung sie bekommt. Erst eine Angabe von hundert Prozent macht daraus ein Problem, weil dann die Inhaltsbreite gleich der Containerbreite ist und die Polsterung obendrauf kommt.

Das ist die häufigste Ursache für einen waagerechten Rollbalken, den niemand bestellt hat. Die Abhilfe ist entweder das Weglassen der Breitenangabe oder die umgeschaltete Zählweise – nicht ein Container mit abgeschnittenem Überlauf, der das Symptom versteckt.

In Flexbox und Grid übernimmt die Verteilung ohnehin der Container: Eine Spur mit dem Anteil eins nimmt den übrigen Platz, und was das Kind an Polsterung mitbringt, ist Teil dieser Spur. Auch dort lohnt die umgeschaltete Zählweise, weil sonst eine prozentuale Grundgröße dieselbe Falle stellt.

Warum die Höhe sich anders verhält

Für die Höhe gilt dieselbe Addition, aber eine andere Ausgangslage. Ihr Ausgangswert ist auto, und das bedeutet: so hoch wie der Inhalt. Ein Block füllt seinen Container in der Breite, aber nicht in der Höhe – die Breite ergibt sich aus dem verfügbaren Platz, die Höhe aus dem, was darin steht.

Daraus folgt der bekannteste Stolperstein bei Prozentangaben: Eine Höhe in Prozent setzt voraus, dass der enthaltende Block eine bestimmte Höhe hat. Hat er sie nicht, wird die Angabe zu auto, und die Box bleibt so hoch wie ihr Inhalt. Deshalb funktioniert eine Kette aus Prozenthöhen nur, wenn sie lückenlos bis zu einem Element mit fester Höhe reicht.

Eine feste Höhe ist bei Text ohnehin selten richtig: Wächst der Inhalt – durch eine längere Übersetzung, eine größere eingestellte Schrift, eine schmalere Spalte –, läuft er heraus. Wo eine Mindestgröße gebraucht wird, ist die Angabe für die Mindesthöhe die bessere Wahl, weil sie nach unten begrenzt und nach oben mitwächst. Und für Anordnungen, die gleiche Höhen brauchen, übernimmt das heute der Container: In Flexbox und Grid strecken sich die Kinder von sich aus auf dieselbe Höhe.

Beide Lösungen sind gleich richtig, und die Wahl hängt vom Rest des Stylesheets ab: Wer die Zählweise ohnehin global umgestellt hat, notiert die Außenbreite direkt; wer im Modell von CSS 2.1 arbeitet, rechnet zurück. Was in keinem Fall trägt, ist Raten – die Rechnung ist einfach, und der Box-Modell-Visualizer zeigt sie an jedem Regler mit.

Fragen zur Übung