Schönes neues CSS: box-sizing

Achtung: dieser Beitrag ist alt! Es kann gut sein, dass seine Inhalte nicht mehr aktuell sind.

Wer zum ersten Mal mit CSS in Berührung kommt, findet das Box Model meist etwas unintuitiv. Wenn man da nämlich einem Element eine Breite oder Höhe gibt und es zusätzlich mit einem Rahmen oder einem Innenabstand versieht, plötzlich breiter und höher als angegeben – denn die Breitenangabe gilt nur für den Inhalt der Elements, nicht für das Element selbst. Manchmal ist dieses Verhalten auch für Nicht-Anfänger etwas unpraktisch. Mit der CSS3-Eigenschaft box-sizing könnte das Problem bald gegessen sein, denn das ist nicht weniger als ein Opt-Out für ein Box Model wie wir es kennen.

Was macht box-sizing?

Mit box-sizing kann man für seine Elemente ein alternatives Boxmodel aktivieren. Normalerweise sähe ein Block-Element mit einer fest definierten Breite, einer Border und etwas Padding so aus:

Das normale Box Model

Die Angabe der Breite (oder auch einer Höhe) betrifft also den Inhalt eines Elements, während das Element selbst durch Borders oder Padding noch höher oder breiter werden kann. Dieses Verhalten kann unter bestimmten Umständen durchaus einige Dinge verkomplizieren, wenn man beispielsweise mit kombinierbaren CSS-Klassen arbeitet.

.standardbox {
    width:256px;
    width:256px;
}
.border-alpha {
    border:16px solid black;
}
.border-beta {
    border:8px solid black;
}

Kombiniert man man die Klasse standardbox mit border-alpha, hat das Endprodukt andere Maße als wenn man border-beta benutzt. Und das kann bei einem Layout mit vielen gefloateten Boxen schnell mal unangenehme Auswirkungen haben. Und genau hier hilft box-sizing. Das oben abgebildete Beispiel sähe mit box-sizing:border-box; so aus:

Das alternative Box Model

Also: Mit box-sizing:border-box; legen height und width nicht mehr die Maße des Inhalts eines Elements, sondern die Maße des Elements selbst fest und berücksichtigt dabei Rahmen und Abstände.

Wie benutzt man box-sizing?

Diese Frage ist etwas komplizierter als man meinen möchte. Wie man box-sizing benutzt hängt tatsächlich davon ab, welches CSS-Modul man fragt. Im Moment ist CSS3 ja noch in der Entwicklung und da kommen solche Diskrepanzen zwischen den einzelnen Modulen schon mal vor. Das CSS3 Basic User Interface Module sieht für box-sizing folgende Werte vor:

  • content-box: Altes/Normales Box Model
  • border-box: Neues Box Model, Rahmen und Innenabstände verbreitern ein Element nicht mehr
  • inherit: Vom Elternelement übernehmen (Standardwert)

Beim CSS Advanced Layout Module geht man von folgenden Werten aus:

  • content-box: Altes/Normales Box Model (Standardwert)
  • padding-box: Neues Box Model, Innenabstände verbreitern ein Element nicht mehr
  • border-box: Neues Box Model, Rahmen verbreitern ein Element nicht mehr
  • margin-box: Neues Box Model, zusätzliche Außenabstände verkleinern ein Element, so dass seine Breite mit Margin zusammen nicht die vorgegebene Breite überaschreitet

Wie wir wissen kann etwas nur W3C-Standard werden, wenn mindestens zwei unterschiedliche Implementierungen in den gängigen Browsern vorliegen. Und so gesehen spricht einiges dafür, dass die erste Variante Realität wird – denn die findet man bereits in allen Browserfamilien.

Welche Browser unterstützen box-sizing?

Opera kennt box-sizing und Mozilla, Webkit-Browser sowie der IE8 nehmen es mit ihren jeweiligen Prefixen (-moz, -webkit und -ms, also z.B. -moz-box-sizing) an. Dabei handelt es sich jeweils um die Variante aus dem CSS3 Basic User Interface Module mit den möglichen Werten content-box, border-box und inherit. Der Firefox hat zusätzlich noch den padding-box-Modus aus dem Advanced Layout Module implementiert. Für all das gibt es eine Testseite.

Es sieht also wirklich so aus, also könnten wir in absehbarer Zeit dieses nette CSS3-Feature produktiv einsetzen. Die Welt wird dadurch keine andere, aber vielleicht macht box-sizing das eine oder andere etwas einfacher, zumindest den Einstieg in CSS. Webkit, Mozilla und Microsoft müssen nur noch ihre schon vorhandenen Implementierungen fertigstellen.

Die Internet Explorer 6 und 7 müssten natürlich auch noch aussterben – wobei man diesen Versionen theoretisch mittels dieses Scripts box-sizing-Fähigkeiten verpassen könnte. Aber wenn man schon CSS3-Features mit Javascript faken muss, dann vielleicht lieber nur Eyecandy und keine elementaren Layout-Eigenschaften.

Kommentare (13)

  1. Chris

    9. Februar 2009, 19:41 Uhr

    Toller Beitrag. Danke!

  2. Nikolaus Rademacher

    9. Februar 2009, 19:54 Uhr

    Hat der IE nicht sowieso immer schon zumindest im padding-box-Modus gearbeitet? Wenn man einer Box ein padding hinzugefügt hat, wurde die Breite soweit ich weiß nie beeinträchtigt, oder?

  3. Peter

    9. Februar 2009, 22:10 Uhr

    Zitat Nikolaus Rademacher:

    Hat der IE nicht sowieso immer schon zumindest im padding-box-Modus gearbeitet? Wenn man einer Box ein padding hinzugefügt hat, wurde die Breite soweit ich weiß nie beeinträchtigt, oder?

    Wenn der IE5 oder 6 im Quirks Mode ist, dann ist das in der Tat so. Wenn ich mich recht entsinne, jedenfalls.

  4. GE

    10. Februar 2009, 15:18 Uhr

    "... Und so gesehen spricht einiges dafür, dass die erste Variante Realität wird ..."

    Also wenn schon, dann richtig. Es sollten alle 4 box-sizing-Modelle (und inherit) zum Standard werden, dann wissen die Browserhersteller wenigstens, was zu tun ist, und wir können das in 5-6 Jahren anwenden :-)

  5. michael

    5. März 2009, 16:20 Uhr

    Also der Autor des Scriptes das am Ende des Artikel verlinkt ist, hat den hauptvorteil des box-sizing:border-box nicht wirlklich verstanden.

    Es spielt seine Stärke nämlich erst richtig aus, wenn man mit Prozentwerten arbeitet. Also wenn man zum Beispiel mehrspaltige Layout mit Prozentwerten machen möchte, und trotzdem nicht auf Padding und Borders verzichten möchte.
    Ausgerechnet die Unterstützung von Prozenten fehlt in dem Script. Kenn jemand ne andere Lösung?

  6. Jürgen Jeka

    18. April 2009, 16:54 Uhr

    Hallo!
    Ein paar Korrekturen bzw. Updates:

    1. IE8 versteht box-sizing jetzt ohne -ms-Prefix.
    2. Das CSS 3 "Advanced Layout Module" heißt jetzt "Template Layout Module", box-sizing ist erstmal ersatzlos gestrichen. Verbindlich ist also das Basic UI Modul, das seit 2004 im stabilen CR Status ist ("ready to implement").

    Wekkit verwendet den Prefix nur wegen Kompatibilitätsproblemen mit älteren, Mac orientierten Seiten. Die wurden vor Jahren für IE5.x Mac geschrieben und verwenden fleißig box-sizing (von IE5.x Mac unterstützt).

    Warum Mozilla den prefix nicht streicht, weiß ich nicht genau. Es gibt wohl ein paar Bugs und der unterstützte Wert padding-box ist nicht normgerecht.

    Eine gute Übersicht (englisch) gibts hier:
    https://developer.mozilla.org/en/CSS/box-sizing

    j.j.

  7. max

    25. Juni 2009, 15:57 Uhr

    gegessen sein, das das ist nicht weniger als ein Opt-Out für ein Box Model

    Ein bisschen zu viele Artikel ;)?
    Wie auch immer, danke für den Beitrag :-)

  8. Andreas

    21. Juni 2011, 09:47 Uhr

    Schöner Artikel!

  9. sissi

    4. Februar 2012, 02:17 Uhr

    Dankeschön,

    * { box-sizing: border-box; }

    geistert ja gerade durch Twitter und ich hab mich gewundert, was es damit auf sich hat :-)

  10. Bernd

    4. März 2013, 17:19 Uhr

    "Und so gesehen spricht einiges dafür, dass die erste Variante Realität wird – denn die findet man bereits in allen Browserfamilien."

    welche Variante ist denn mit erster gemeint?

  11. Peter Kröner

    4. März 2013, 17:23 Uhr

    Die Variante aus dem CSS3 Basic User Interface Module (also ohne padding-box und margin-box) war gemeint. Die ist es dann mittlerweile auch geworden, das Template/Advanced Layout Module ist stand heute tot.

  12. Ralph Stahl

    19. März 2014, 15:16 Uhr

    Gut erklärt, danke! Schade nur, daß inzwischen die Bildchen zur Erläuterung verschwunden sind :-( (404).

  13. Peter Kröner

    19. März 2014, 15:30 Uhr

    Bilder sind wieder da.

Die Kommentarfunktion ist seit Juli 2014 deaktiviert, weil sie zu sehr von Suchmaschinenoptimierern für manuellen Spam mißbraucht wurde. Wenn du Anmerkungen oder Fragen zum Artikel hast, schreib mir eine E-Mail oder melde dich via Twitter.

Folgt mir!

Kauft mein Zeug!

Cover der HTML5-DVD
Infos auf html5-dvd.de, kaufen bei Amazon

Cover des HTML5-Buchs
Infos auf html5-buch.de, kaufen bei Amazon

Cover des CSS3-Buchs
Infos auf css3-buch.de, kaufen bei Amazon