Visual Lab · Instrument 3
Box-Modell in Schichten: „Warum ist diese Box 342px breit?“
Jedes Element ist eine Box aus vier Schichten: Inhalt, Innenabstand, Rahmen, Außenabstand. Die Frage, warum eine Box breiter ist als ihre width, beantwortet das Instrument mit einer Rechnung, die sich an jedem Regler ändert.
Dasselbe für die Höhe
Für die Höhe gilt die gleiche Rechnung mit height, den oberen und unteren Innenabständen und Rahmen. Der Unterschied liegt beim Außenabstand: Vertikale Außenabstände benachbarter Blöcke fallen im normalen Fluss zusammen, horizontale nie. Zwei Boxen mit je 24 Pixel oberem und unterem Außenabstand stehen also 24 Pixel auseinander, nicht 48 – die Anzeige „Außenkante bis Außenkante“ gilt für eine einzelne Box, nicht für ihren Abstand zur nächsten. Der Artikel über Außenabstände zeigt die Fälle.
Die Rechnung hinter der Anzeige
Im Box-Modell von CSS 2.1 gilt width ausschließlich für den Inhalt. Innenabstand und Rahmen werden auf beiden Seiten addiert: Breite der Box = width + 2 × padding + 2 × border-width. Mit 300, 16 und 5 Pixeln sind das 342 Pixel. Der Außenabstand liegt außerhalb und zählt zur Box nicht dazu, bestimmt aber, wie viel Platz sie im Fluss beansprucht: 342 + 2 × 24 = 390 Pixel von Außenkante zu Außenkante.
Mit box-sizing: border-box kehrt sich die Rechnung um: width meint die Breite einschließlich Innenabstand und Rahmen, und der Inhalt bekommt, was übrig bleibt – 300 − 32 − 10 = 258 Pixel. Das Modell stammt nicht aus CSS 2.1, ist aber in jedem aktuellen Browser verfügbar und für Layouts mit Prozentbreiten die einfachere Rechnung, weil ein padding die Spalte nicht mehr sprengt.
Der Außenabstand steht bewusst außerhalb der Summe: Er gehört nicht zur Box, sondern zum Abstand zwischen Boxen, und zwei senkrecht benachbarte Außenabstände fallen zu einem zusammen. Deshalb ist die äußere Breite oben mit + 2 × notiert und nicht in die Gesamtbreite eingerechnet. Ein zweiter Sonderfall: Bei width: auto übernimmt der Inhalt keine feste Breite – dann füllt die Box den verfügbaren Raum und Innenabstand und Rahmen gehen von ihm ab.
Der Grundlagenartikel Das Box-Modell erklärt die Schichten und ihre Eigenschaften; Außenabstände behandelt das Zusammenfallen benachbarter Außenabstände, das die Anzeige „Außenkante bis Außenkante“ im Fluss kleiner ausfallen lässt als hier gerechnet.
Der Schalter, der die Rechnung umdreht
Die Rechnung oben ist die von CSS 2.1: width bezeichnet die Breite des Inhalts, Innenabstand und Rahmen kommen hinzu. Für ein Raster ist das unpraktisch, denn eine Box mit fünfzig Prozent Breite und zwanzig Pixel Innenabstand ist eben nicht halb so breit wie ihr Container. Über Jahre wurde deshalb gerechnet, verschachtelt oder mit negativen Außenabständen nachgeholfen.
Die Eigenschaft box-sizing schaltet auf die andere Zählweise um: border-box bedeutet, dass die angegebene Breite die Außenkante des Rahmens meint und Innenabstand und Rahmen von innen abgezogen werden. Der Inhalt wird also schmaler statt die Box breiter. Nur der Außenabstand bleibt außen vor, in beiden Zählweisen. Viele Stylesheets stellen die Zählweise heute im Kopf für alle Elemente um; das ist kein Verstoß gegen CSS 2.1, sondern eine spätere Ergänzung, die die ältere Zählweise als Ausgangswert unangetastet lässt. Wer altes und neues CSS mischt, sollte allerdings wissen, welche der beiden gerade gilt – das Instrument oben zeigt beide nebeneinander.
Wenn die Breite gar nicht angegeben ist
Die Rechnung setzt voraus, dass eine Breite angegeben ist. Der Ausgangswert ist aber auto, und dann läuft es andersherum: Bei einem Block im normalen Fluss ergibt sich die Inhaltsbreite als das, was von der Breite des enthaltenden Blocks nach Abzug von Rahmen, Innen- und Außenabständen übrig bleibt. Ein Block füllt seinen Container also nicht, weil er hundert Prozent breit wäre, sondern weil seine Breite der Rest ist – und deshalb ragt er auch nicht heraus, wenn man ihm Innenabstand gibt.
Genau das ändert sich mit einer Angabe von hundert Prozent: Dann ist die Inhaltsbreite gleich der ganzen Containerbreite, und Innenabstand und Rahmen kommen obendrauf. Die Box ragt heraus. Das ist die häufigste Erklärung für einen waagerechten Rollbalken, den niemand bestellt hat, und die Abhilfe ist entweder das Weglassen der Breitenangabe oder die umgeschaltete Zählweise. Bei einem umflossenen, einem absolut positionierten oder einem als Inline-Block dargestellten Element gilt die Rest-Regel übrigens nicht: Dort schrumpft die Box auf ihren Inhalt, und eine fehlende Breitenangabe bedeutet etwas ganz anderes.
Was der Außenabstand darf und der Innenabstand nicht
Eine Asymmetrie fällt im Instrument nicht auf, weil der Regler sie nicht zulässt: Der Außenabstand nimmt negative Werte an, der Innenabstand nicht. Ein negativer Außenabstand zieht die Box in die betreffende Richtung und verkleinert damit den Platz, den sie im Fluss beansprucht – bei einer angegebenen Breite überlappt sie ihre Nachbarn, ohne Breitenangabe wird sie breiter.
Ebenso wenig kennt der Innenabstand das Schlüsselwort für die automatische Verteilung. Beides zusammen macht den Außenabstand zum Werkzeug für die Lage einer Box und den Innenabstand zum Werkzeug für ihre Innenmaße – eine Unterscheidung, die sich beim Aufbau eines Rasters bezahlt macht.
Fragen zum Instrument
Warum zählt der Außenabstand nicht zur Breite der Box?
Weil margin außerhalb des Rahmens liegt und transparent ist. Er bestimmt den Abstand zu den Nachbarn, nicht die Größe der Box. In der Anzeige steht er deshalb als „Außenkante bis Außenkante“ getrennt.
Was ändert box-sizing: border-box?
Die Angabe width meint dann die Breite einschließlich Innenabstand und Rahmen. Der Inhalt wird entsprechend schmaler. CSS 2.1 kennt nur das Verhalten content-box; border-box stammt aus CSS Basic User Interface Level 3.
Warum ist die Box breiter, als ich width gesetzt habe?
Im Modell von CSS 2.1 gilt width nur für den Inhalt. Innenabstand und Rahmen kommen auf beiden Seiten dazu. Bei width: 300px, padding: 16px und border: 5px ist die Box 342 Pixel breit.