CSS box-sizing: border-box / padding-box

CSS box sizing einfache Berechnung der Breite mit padding und border

box-sizing vereinfacht die Berechnung der Größe von Blöcken bzw. des Raums, den ein Block einnimmt. Mit box-sizing bedeutet 'width:200px', dass der Browser den Block 200px breit rendert, gleich ob und wieviel padding zum Block gehört.

Die einfache Angabe der Breite für einen Block reicht nicht ohne Weiteres, um den Raum für ein Layout-Element in der Webseite zu bestimmen.

Breite und Höhe von Elementen werden vom vom Box-Modell gesteuert. Die Kombination von padding, border und width bildet die Breite, mit der ein Block im Viewport des Browsers gerendert wird.

Darstellung der Elemente, die zur Berechnung der Breite zählen border-left: 4px border-right:4px tatsächlich gerenderte Breite: 300px padding-left:10px padding-right: 10px Breite des Inhaltswidth: 272px
padding + border + width = tatsächliche gerenderte Breite
padding + border + height = tatsächliche gerenderte Höhe 

Die Berechnung der tatsächlich gerenderten Breite ist schon bei Pixelangaben aufwändig, aber wenn drei Blöcke den verfügbaren Platz einnehmen sollen, ist das Box-Modell überfordert.

Block 1
Block 2
Block 3
.boxmodell div { 
   width: 27%; 
   padding: 1em; 
   border: 1px solid blue; 
}

funktioniert nicht zuverlässig bei allen Monitorbreiten und nimmt nie den Raum ein, der zur Verfügung steht.

Wenn Blöcke in relativen Breiten – mit Prozentangaben – angelegt werden, ist box-sizing der Rettungsanker. Wie sonst könnten wir einen Block mit padding und border auf eine exakte Breite festlegen?

box-sizing: border-box

Erst box-sizing macht die Berechnung von Breite und Höhe intuitiv. Wo Eigenschaften wie width, padding und border zu den beliebtesten Fehlern führen, ist ein Block mit box-sizing und width:200px auch tatsächlich 200px breit.

Das sorgt dafür, dass Elemente in den vorgesehen Raum passen, ohne dass wir die Breite von padding und border subtrahieren müssen. Das CSS wird verständlicher und besser lesbar.

Für einen HTML-Block wird box-sizing als border-box notiert. Das zwingt den Browser, den kompletten Block innerhalb der angegebenen Breite zu rendern. padding und border werden innerhalb der Box gerendert und der Inhalt auf den verbleibenden Raum beschränkt.

.box { 
   box-sizing:border-box; 
   width: 49%;
   border:4px solid blue; 
   padding: 10px;
}

funktioniert zuverlässig.

Eine Box mit padding und border, 49% Breite
Eine Box mit padding und border, 49% Breite

box-sizing content-box | padding-box | border-box

content-box (default)
ist die Voreinstellung. Breite und Höhe (sowie min-width und min-height, max-width und max-height) legen die ursprüngliche Höhe und Breite des Elements fest. padding und border liegen um den Block herum.
padding-box
padding liegt innerhalb des Blocks. Zur Bestimmung von width und height zieht der Browser das padding ab – dabei können negative Werte für Höhe und Breite entstehen. Da das nicht sein darf, geben Abfragen dann Null zurück.
border-box
padding und border liegen innerhalb des Blocks. Genaus wie bei padding-box geben Abfragen auf Breite und Höhe des Elements Null zurück, wenn bei der Berechnung negative Werte entstehen würden.

box-sizing für ALLES!

Viele Webdesigner und Entwickler wie Paul Irish empfehlen, border-box für alle Elemente der Seite einzusetzen, um das Layout einfach zu halten.

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

Der Browser-Präfix wird kaum noch benötigt, denn box-sizing ist nicht gerade neu. Es hat allerdings eine Weile gebraucht, obwohl schon IE8 box-sizing ziemlich gut unterstützt hat (in IE8 wird min-width auf die content-box angewendet, selbst wenn box-sizing auf border-box gesetzt ist).

Die CSS-Frameworks wie Foundation und Bootstrap haben box-sizing bereits eingebaut.

box-sizing