CSS box-sizing: border-box

CSS box-sizing für 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.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Breite von HTML-Elementen mit padding und border

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

padding, border und width
Gesamtbreite der Box: 300px
padding + border + width = tatsächliche gerenderte Breite
padding + border + height = tatsächliche gerenderte Höhe 

Das padding zählt mit zur Breite bzw. Höhe der Box, und wird oft in anderen Maßeinheiten notiert – z.B. in rem, em oder ch, während die Breite der Box in %-Werten oder Pixel angegeben wird.

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; 
}

27% + 2×1em + 2×1px – das 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;
}

Das funktioniert zuverlässig.

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

box-sizing content-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.
border-box
padding und border liegen innerhalb des Blocks. Abfragen zur Breite und Höhe des Elements geben 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 {
  box-sizing: border-box;
}

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