Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Blick auf die Uferpromenade in Bremen bei Sonnenuntergang..

      Bremen

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Beste Agenturen Augsburg Altstadt von oben.

      Augsburg

      Blick auf die Mittlere Brücke in Basel bei Sonnenaufgang.

      Basel

      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Das Ruhrstadion in Bochum von oben, bei Sonnenuntergang.

      Bochum

      Bonn von oben, mit Blick auf den Rhein.

      Bonn

      Blick auf die Uferpromenade in Bremen bei Sonnenuntergang..

      Bremen

      Dortmund von oben Panoramafoto.

      Dortmund

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Duisburg Innenhafen bei Sonnenuntergang.

      Duisburg

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Die Skyline von Essen von oben.

      Essen

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Freiburg Innenstadt vom Münster aus fotografiert mit Blick Richtung Schlossberg und Sonnenuntergang..

      Freiburg im Breisgau

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Karlsruhe von oben

      Karlsruhe

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      Leipzig Innenstadt bei Sonnenuntergang und von oben.

      Leipzig

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Nürnberg Altstadt Stadtmauer von oben

      Nürnberg

      Blick auf das Flussufer der Innenstadt von Regensburg bei Nacht.

      Regensburg

      Agenturen Salzburg: Blick auf die Altstadt und die Hohensalzburg.

      Salzburg

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » CSS » CSS3: Das etwas andere Box-Modell mit {box-sizing:border-box}

CSS3: Das etwas andere Box-Modell mit {box-sizing:border-box}

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 15 Kommentare
Lesedauer: 3 Minuten
  • von Peter Müller
  • 18. Februar 2013
Bookmarke mich
Share on pocket

Das klassische Box-Modell war noch nie besonders intuitiv. In CSS3 wurde mit {box-sizing:border-box} eine Alternative vorgestellt, die besonders bei flexiblen Layouts fast nur Vorteile hat.

real-world-box

Das klassische Box-Modell {box-sizing: content-box}

Wenn Sie im analogen Alltag die Breite einer Kiste angeben, dann ist damit immer die Entfernung von einem Außenrand zum anderen gemeint, inklusive Innenabstand (padding) und Rand der Kiste (border).

Beim klassischen Box-Modell ist das anders. Dort definiert width nur die Breite des Inhaltsbereichs und Angaben für padding oder border werden hinzugefügt. Visuell sieht dieses klassische Box-Modell so aus (nur zur Erinnerung):

boxmodell_content-box-w640

Man muss manchmal ein bisschen rechnen oder tricksen bis alles passt. Bei Layouts mit festen Pixelbreiten ist das zwar manchmal etwas nervig, aber durchaus machbar.

Doppelte HTML-Elemente als Notlösung

Wirklich problematisch wird das klassische Box-Modell erst, wenn innerhalb einer Box die Angaben für width, padding, border oder margin verschiedene Einheiten verwendet werden, denn dann lässt sich die Gesamtbreite dieses Elements nicht mehr zuverlässig bestimmen:

  • Eine mit <aside class="sidebar"> erstellte Layoutspalte soll eine Breite von 20% und ein padding links und rechts von jeweils 10px bekommen.
  • Frage: Wie viel Platz muss man für die Sidebar im Layout reservieren?
  • Antwort: Keine Ahnung. Das kann man nicht zuverlässig berechnen.

Damit flexible Layouts aber nicht zur reinen Lotterie verkommen, hat man sich beholfen, indem man das HTML-Element verdoppelt und die Box-Modell-Eigenschaften auf die beiden Elemente verteilt:

  • Innerhalb von aside wird ein zusätzliches div eingefügt.
  • aside bekommt width:20% zugewiesen.
  • Das innere div bekommt eventuelle Angaben für padding, border oder auch margin.

Dadurch hat die Sidebar unabhängig vom padding & Co immer eine Breite von 20% und wird im wahrsten Sinne des Wortes berechenbar.

Diese Dopplung von HTML-Elementen ist heute so selbstverständlich, dass wir fast vergessen haben, dass es ursprünglich mal eine Notlösung war.

Boxen wie im richtigen Leben mit CSS3: {box-sizing: border-box}

Fast unbemerkt von der breiten Öffentlichkeit haben die Browser so nach und nach ein zweites Box-Modell eingebaut, das etwas anders funktioniert. In diesem Modell sind padding und border in der Angabe von width bereits enthalten. Es heißt border-box, weil die Breite der Box von border bis border gemessen wird. Grafisch dargestellt sieht das so aus:

boxmodell_border-box_kraken-w640

Im Webdesigner-Alltag ist diese unscheinbare Änderung beim Layouten sehr praktisch. Bei der weiter oben beschriebenen Sidebar spart man damit zum Beispiel das doppelte, innere HTML-Element:

  • Zunächst wird .sidebar { box-sizing:border-box} definiert.
  • Dann wird dem Element z. B. width:20% und ein beliebiges padding oder border zugewiesen.

Fertig.

Mit der border-box ist es völlig egal, wie viel padding oder border ein Element bekommt, denn diese Werte werden von der Breite abgezogen und nicht hinzugefügt. Was in den meisten Fällen einfach nur praktisch ist. Die Sidebar wird auch ohne Dopplung der HTML-Elemente berechenbar.

Ein mit margin definierter Außenabstand kommt übrigens immer noch hinzu, aber dass ist bei den Boxen im richtigen Leben auch so.

Die border-box im Alltag

Wenn man erst einmal so richtig begriffen hat, wie praktisch diese border-box sein kann, kommt natürlich unweigerlich die Frage nach der Browserunterstützung auf. Und hier ist die Antwort:

caniuse-com-border-box-kraken-w640

Hey hey, sogar IE8 versteht das. Unbelievable. Mozilla benötigt zwar noch einen Prefix, aber wer den IE7 erst einmal draußen vor lassen kann, könnte sein Stylesheet mit folgendem Style beginnen:

* { 
  -moz-box-sizing: border-box; 
  box-sizing: border-box; 
}

Und genau das empfiehlt Paul Irish in seinem Blog-Artikel vom 1. Februar 2012.

Fazit

Die border-box ist eine mehr als willkommene Alternative zum klassischen Box-Modell, aber bevor Sie komplett auf die border-box umsteigen, sollten Sie die weiter unten gelisteten Artikel studieren. Als Basis für flexible Layouts wird die border-box wahrscheinlich schon ziemlich bald selbstverständlich sein.

Lesenswerte Links zum Artikel

Hier einige lesenswerte Artikel, die gleichzeitig auch ein bisschen den Werdegang von vorsichtigen Versuchen bis zur Empfehlung widerspiegeln:

  • Paul Irish, * {border-box} FTW (Februar 2012)
  • Roger Johannsson, Controlling width with CSS3 box-sizing (April 2011)
  • Chris Coyier, Box-Sizing (September 2010)
  • Dirk Jesse, CSS – Alles wird gut? (Dezember 2006)

Und hier noch zwei Referenzen: * W3C, CSS3-ui box-sizing * Mozilla Developer Network, box-sizing

Bildquelle Holzbox: 16 Miles of String via photopin cc

(dpe)

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Peter Müller

Peter Müller

greift gerne trockene und komplizierte Sachverhalte auf und weiß sie einfach und unterhaltsam darzustellen.

Agenturpartner

Webagentur klickbeben

Innsbruck

SEO Galaxy

Udler

Webtronix Media GmbH

Hanau

Niels Neumann Online Marketing

Limburgerhof

Haurand Webdesign

Aachen

Alle Agenturpartner

Jobs

Junior Online Marketing Manager

München

Web Development & Project Management

Remote

Google Ads Kampagnen­betreuer

Salzburg

Senior Online Marketing Manager und stv. Geschäftsführer

Innsbruck

Online Marketing Manager

München

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Alles zu CSS Background-Image (großer Leitfaden mit Codebeispielen)

Mit CSS Background-Image (deutsch: CSS-Hintergrundbild) kann man einem Element ein Hintergrundbild, Hintergrundvideo, eine Hintergrundfarbe oder einen Farbverlauf zuweisen.

 →   

Diese CSS-Selektoren sollten Sie kennen

Im CSS gibt es jede Menge interessanter Selektoren, die versierten Frontend-Entwicklern zwar grundsätzlich bekannt sind, die dennoch oftmals nur sparsam zum Einsatz kommen.

 →   

8 Dropdown-Menüs zum Nachbauen — ohne JavaScript

Wohin mit der Navigation? Diese Frage muss bei eigentlich jedem Webprojekt beantwortet werden. Gerade bei umfangreichen Websites ist es nicht immer einfach, die richtige Antwort darauf zu finden. Besteht eine Webpräsenz aus vielen Seiten und Unterseiten, bietet sich häufig ein Dropdown-Menü an.

 →   

15 Antworten zu „CSS3: Das etwas andere Box-Modell mit {box-sizing:border-box}“
— was ist Deine Meinung?

  1. HosonoDesign sagt:
    7. Oktober 2015 um 1:02 Uhr

    Und schon bin ich wieder ein Stück schlauer. Danke 😉

    Antworten
  2. David Bruchmann sagt:
    11. März 2014 um 15:27 Uhr

    Womit wir wieder by Microsoft’s ursprünglichem Box-Model wären …

    Antworten
  3. Andreas Isaak sagt:
    24. Februar 2013 um 21:09 Uhr

    Das einzige Problem was ich bei dem Vorschlag von Paul Irish sehe, ist das Skripte wie Mediabox nicht mehr reibungslos funktionieren. Das Javascript muss das neue Boxmodel unterstützen – besser gesagt darf es keine eigenen Berechungen für Padding und Border anstellen.

    Solange werde ich persönlich den Sternselektor mit dem neuen Boxmodell nicht verwenden. Das hat mich mal 2 Stunden debugging gekostet …

    Antworten
    1. Peter Müller sagt:
      22. Oktober 2015 um 11:38 Uhr

      Für die Probleme in Drittmodulen könnte ein kleiner Trick helfen, den Chris Coyier beschreibt:

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

      Wenn für ein Drittmodul die Content-Box definiert wurde, wird das so an alle Elemente innerhalb des Moduls vererbt.
      (https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/)

      Antworten
  4. weizmedia sagt:
    24. Februar 2013 um 14:56 Uhr

    Sehr interessanter Beitrag! Es gab schon einige Fälle in denen ich mehrmals die Werte „width“ und „padding“ anpassen musste. Das blöde hierbei war immer das Berechnen neuer Werte. Mit dieser Lösung wird das ganze etwas dynamischer. Ich stimme aber zu, dass das Konstrukt bei Bildern nicht sehr hilfreich ist, sondern vorwiegend bei Text-Elementen.

    Antworten
    1. Peter Müller sagt:
      11. April 2013 um 18:08 Uhr

      Bei den Bildern sehe ich auf Anhieb zwei einfache Möglichkeiten:

      1. CSS3 box-shadow statt Rahmenlinien per border
      2. img { box-sizing: content-box; }

      Damit ist dann alles wieder im Lot 😉

      Antworten
      1. Felix sagt:
        25. Juli 2013 um 16:59 Uhr

        Workarounds findet man immer. Wenn man aber Schatten tatsächlich braucht, dann ist das nicht sinnvoll anwendbar.

        Antworten
  5. Alex Halm sagt:
    18. Februar 2013 um 18:11 Uhr

    Wie immer gut verständlich und zum Schmunzeln anregend geschrieben. Sehr interessant, diese Entwicklung des Boxmodells. In etlichen Jahren wird man wohl nur noch müde lächelnd auf die „schrecklichen“ Zeiten der Browseroldies zurückblicken.

    DANKE für den Artikel. 🙂

    Antworten
  6. Jens Grochtdreis sagt:
    18. Februar 2013 um 15:37 Uhr

    Ist es nicht phantastisch, dass das ehemals „kaputte Boxmodell“ des IE5 (und IE6 im Quirks-Modus) fröhliche Urständ als „modernes Boxmodell“ feiert? Schade, dass man den IE7 nicht in den Quirks-Modus für dieses Boxmodell schicken kann. Da hilft dann nur ein extra CSS oder JavaScript. Aber glücklicherweise wird der Browser immer unbedeutender.

    Mal schauen, was als Nächstes vom alten IE rübergerettet wird. Einige CSS3-Eigenschaften sind ja verbesserte Entsprechungen von IE-Filtern. Auch die neuen CSS-Filter gab es ja schonmal im IE 🙂

    Antworten
    1. Peter Müller sagt:
      18. Februar 2013 um 16:04 Uhr

      Im allerersten „Little Boxes“ trug der Abschnitt über das „kaputte Box-Modell“ den Titel „Das etwas andere Box-Modell des IE5“. Also genau wie der Artikel hier. Diese kleine Ironie konnte ich mir nicht verkneifen 😉

      Antworten
    2. Felix sagt:
      23. Februar 2013 um 12:37 Uhr

      Es ist schon etwas anders. Es wäre einmal eine gute Idee, einfach eine Berechnungsmöglichkeit anzubieten. Sodass man also beispielsweise angeben kann: „width: (20px + 30%)“ beispielsweise.

      box-sizing:border-box ist beispielsweise bei Grafiken mit Border und padding nicht sinnvoll anwendbar, weil man dann die Größenangabe innerhalb img inklusive padding und border machen muss. Wenn also ein Bild umrandet dargestellt werden soll mit padding und border und das insgesamt 5px ausmacht muss man die Bildgröße um jeweils 10px größer angeben. Bei Browsern, die den Befehl nicht verstehen, wird das Bild vergrößert dargestellt und wenn man global über CSS padding und/oder ändert muss man dann bei jedem Bild entsprechend die Bildgröße ändern.

      Also einfach eine Berechnungsmöglichkeit bei Größenangaben dazunehmen, das ist weitaus flexibler als solche gedankenlosen Basteleien. Dann schaut das beispielsweise so aus: width: (300px – padding – border). Ich verstehe nicht, was daran so schwierig sein kann.

      Jeder nur mittelmäßig begabte Grafiker hätte eine Festlegung eines in sich logischen und flexiblen CSS innerhalb einer Woche komplett fertig. Es ist haarsträubend, welchen Unfug hier offenbar dumme Wichtigtuer in jahrelangen Sitzungen da als Standard produzieren.

      Antworten
      1. Mo sagt:
        28. September 2013 um 13:29 Uhr

        Ich will ja hier keine Kommentar-Leichen schänden, aber das mit der Berechnung geht oft unter!
        Man KANN mit CSS rechnen. Nutze ich mittlerweile ständig:
        #div { width: calc(100% – 200px) } oder bei einer ul, die fünf lis mit padding enthält: ul { height: calc(5*(10px /* höhe */ + 20px /* padding */) }

        Falls hier noch jemand drüberstolpert 🙂

        Antworten
  7. Thomas sagt:
    18. Februar 2013 um 14:51 Uhr

    Für Kompatibilität mit älteren Android-Browser darf man auch ruhig noch das -webkit-Prefix zusätzlich nutzen 🙂

    Antworten
    1. Peter Müller sagt:
      18. Februar 2013 um 14:53 Uhr

      Klar. Schaden kann das nicht 😉

      Antworten
  8. Oink sagt:
    18. Februar 2013 um 14:26 Uhr

    Interessant das box-sizing noch mit Präfix bei Firefox ist. Dachte die wollten die Präfixe loswerden …

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt am Main
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Nürnberg
  • Agenturen in Offenbach am Main
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.