Das Box-Modell

Ein HTML-Dokument wird in rechteckige Bereiche eingeteilt. Diese rechteckigen Bereichen (Boxes) lassen sich mit Hilfe von CSS formatieren. Der Aufbau einer Box wird in CSS durch das Box-Modell definiert.

Das klassische W3C Box-Modell

Ausgangspunkt für das klassische W3C-konforme Box-Modell ist die Größe des Inhalts-Fensters (der Content-Box). Möchte man die Gesamtgröße der dargestellten Box berechnen, muss man die Größe des Innenabstands (padding), des Rahmens (border) und des Außenabstands (margin) zur Größe der Content-Box addieren.

Die Größe der Content-Box wird mit width und ggf. height vorgegeben.

Das W3C Box-Modell
Abbildung: Das W3C Box-Modell

Beispiel für die Formatierung einer CSS-Box


footer {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1.5em;
	margin-bottom: 1.5em;
	padding: 1em;
	}

Das alternative Border-Box-Modell

Das klassische Content-Box-Modell macht es manchmal schwierig, Boxen pixelgenau zu definieren.

Daher hat man das alternative Border-Box-Modell eingeführt, bei dem die Größe der Border-Box wird mit width und ggf. height vorgegeben wird.

Dies bringt Vorteile beim pixelgenauen Positionieren von Boxen mit relativen Größenangaben.

Das Border-Box-Modell
Abbildung: Das Border-Box-Modell

Umschalten zwischen den Box-Modellen

Die box-sizing Eigenschaft (Link zur W3C Spezifikation) in CSS gibt an, welches Box-Modell gelten werden soll.

box-sizing: border-box;  /* alternatives Box-Modell (Border-Box-Modell) */
		 
box-sizing: content-box;  /* klassisches W3C Modell (Content-Box-Modell) */

Der besseren Übersichtlichkeit wegen, sollte man innerhalb eines HTML-Dokuments nur ein Modell verwenden.

Der inzwischen veraltete IE5 bzw. IE5.5 verwendet immer das Border-Box-Modell.