Mit »box-sizing: border-box;« das CSS Box Model verändern

Mit dem CSS Befehl box-sizing: border-box; lässt sich das Box Model von CSS manipulieren. Die sichtbare Breite eines Elements wird dann nicht mehr wie üblich durch die Summe von width, padding und border bestimmt, sondern schließt diese Angaben bereits mit ein. Das erleichtert die Erstellung flexibler Seitenelemente, insbesondere im RWD, deutlich.

Was stört am klassischen Box-Model?

Normalerweise addiert das Box Model von CSS die Angaben von padding und border zur Breite (width) des Elements hinzu. Auch die Größe von margin wird hinzugefügt; da margin jedoch keinen Einfluss auf die sichtbare Breite des Elements hat, lasse ich diesen Punkt in diesem Zusammenhang mal außer acht.

Klassisches Box Model von CSS: Der Platzbedarf des Elements, bestimmt sich aus der Summe von width/height, padding, border und margin
Klassisches Box Model von CSS: Der Platzbedarf des Elements, bestimmt sich aus der Summe von width/height, padding, border und margin

Ein Container mit einer Breite von 100 Pixeln, einem padding von 20 Pixeln und einer Umrahmung von 1 Pixel nimmt also tatsächlich 142 Pixel in Anspruch. 1px border-left + 20px padding-left + width + 20px padding-right + 1px border-right = 142 Pixel Gesamtbreite.

In der Praxis ist dieses Verhalten sehr unpraktisch. Insbesondere wenn Prozentwerte für die Breite des Elements in Kombination mit pixelbasierten padding– oder border-Angaben verwendet werden kann es schnell zu Rundungsproblemen kommen.

Funktionsweise von box-sizing: border-box;

Mit der CSS-Eigenschaft box-sizing: border-box; kann das Box Model verändert werden. Die Breite des Elements wird dann anhand der „Border Box“ berechnet. Wird einem Element eine Breite (width) von 200 Pixeln zugewiesen, so nimmt das Element dank box-sizing auch 200 Pixel in Anspruch. padding und border werden nach innen berechnet.

Wenn box-sizing: border-box; verwendet wird, berechnet der Browser die Breite des Elements anhand der Border Box
Wenn box-sizing: border-box; verwendet wird, berechnet der Browser die Breite des Elements anhand der Border Box

Beispiel-Code für die Anpassung des Box Modells

Das Box-Modell wird bei den meisten modernen Websites für alle Elemente global verändert. Ganz oben im CSS-Code steht üblicherweise folgendes. Auch Frameworks fügen ähnlichen Code ein.

*, *::before, *::after {
  box-sizing: border-box;
}

Browser Support

Den detaillierten Browser-Support für dieses Feature könnt ihr auf caniuse.com einsehen.

Data on support for the css3-boxsizing feature across the major browsers from caniuse.com

In den Internet Explorern 6 und 7 funktioniert die Eigenschaft nicht. Zu diesem Zweck gibt es allerdings ein Polyfill was Abhilfe schafft und sehr einfach einzusetzen ist.

Geschrieben von Jonas

Benutzerbild

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing

Feedback & Ergänzungen – 4 Kommentare

  1. Daniele De Rosa
    schrieb am 13.03.2013 um 12:50 Uhr:

    Auch ich kannte den Polyfill nicht, so gab beim IE 6 und 7 natürlich Probleme bezüglich box-sizing. Danke für den Link!

    Antworten
  2. Mark
    schrieb am 11.03.2013 um 15:11 Uhr:

    An vielen Stellen halte ich box-sizing auch für unverzichtbar. Vielen Dank für den Polyfill-Link, das kannte ich noch nicht.

    Antworten
  3. Andy
    schrieb am 11.03.2013 um 14:17 Uhr:

    In dem Absatz „In der Praxis ist dieses Verhalten…“ ist ein Vertipper „in Kombination mir pixelbasierten padding- oder border-Angaben“ da muss „mit“ anstatt „mir“ hin. :-)
    Ansonsten sehr interessanter Beitrag.

    Antworten
    • Jonas Hellwig
      schrieb am 11.03.2013 um 16:21 Uhr:

      Danke :)

      Antworten

Kommentar zu dieser Seite

Wir freuen uns über Anregungen, Ergänzungen oder Hinweise zu Fehlern. Wir lesen jeden Eintrag, veröffentlichen aber nur, was den Inhalt sinnvoll ergänzt.

Design-Projekte mit kulturbanause

Unsere Leinwand ist der Browser und wir beschäftigen uns seit 2010 intensiv mit dem Thema Responsive Design. Wir realisieren flexible Web-Layouts und modulare Design Systeme.

Responsive Webdesign-Leistungsangebot →

Schulungen von kulturbanause

Wir bieten Seminare und Workshops zu den Themen Konzept, Design und Development. Immer up-to-date, praxisnah, kurzweilig und mit dem notwendigen Blick über den Tellerrand.

Übersicht Schulungsthemen →