Alternatives Box-Modell Border-Box
Wenn man auf Websites einer Box eine Breite und Höhe zuweist, dann gilt die Größe beim Standard Box-Modell nur für den Inhaltsbereich, weshalb sie Content-Box genannt wird. Etwaige Innenabstände (padding) oder Rahmen (border) werden zur Boxgröße hinzu addiert. Die Außenabstände (margin) zählen nicht zur Boxgröße, da damit nur die Abstände zu benachbarten Elementen definiert werden. Sie haben jedoch einen Einfluss auf den Bereich, der durch eine Box eingenommen wird.
Das Standardverhalten gefiel vielen Entwicklern nicht, da sie ständig mit dem Rechnen der Breite oder Höhe konfrontiert wurden. Es erschien als unlogisch, dass man eine Breite für die Box angibt und die Maße für die zusätzlichen Eigenschaften padding und border dabei nicht berücksichtigt und dazugerechnet werden müssen.
Ein häufiger Wunsch war, dass man eine Breite und/oder Höhe angibt und das Maß für die gesamte Box gilt, inklusive padding und border. Diese sollten somit in die Box hineinfallen, sodass die Breite und Höhe nicht vergrößert wird. Daher wurde mit den CSS3-Spezifikationen ein alternatives Box-Modell entwickelt.
Das alternative Box-Modell muss bei der jeweiligen CSS-Regel über die Eigenschaft box-sizing durch den Wert border-box aktiviert werden. Dann gelten etwaige Breiten- oder Höhenangaben für einen Box-Bereich inklusive den Maßen für padding und border. Da die Maße bis zu den äußeren Rahmenkanten gelten, wird es Border-Box genannt. Der Außenabstand (margin) ist jedoch nicht inklusive. Nachfolgend ist die schematische Abbildung.
Border-Box mit box-sizing aktivieren
Das alternative Box-Modell wird über die Eigenschaft box-sizing aktiviert, die von den neueren Browsern unterstützt wird. Als Wert wird dabei border-box eingetragen. Nachfolgend ist beispielhaft ein CSS-Code abgebildet.
Weitere möglichen Werte
Der Eigenschaft box-sizing kann nicht nur der Wert border-box zugewiesen werden. Hierbei gibt es jedoch zwei unterschiedliche Ansätze. Gemäß der CSS3 Basic User Interface Module sind folgende Werte vorgesehen.
- border-box (Alternatives Box-Modell inkl. padding und border)
- content-box (Standard Box-Modell ohne padding und border)
- inherit (Geerbt vom Elternelement)
Das CSS Advanced Layout Module sieht dagegen die folgenden Werte vor
- border-box (Alternatives Box-Modell inkl. padding und border)
- padding-box (Alternatives Box-Modell inkl. padding)
- margin-box (Alternatives Box-Modell mit padding, border und margin)
- content-box (Standard Box-Modell ohne padding und border)
So wie es aussieht, implementieren die Browser jedoch die erste Variante mit border-box, content-box und inherit. Was die CSS-Spezifikation am Ende vorsieht, ist diesen zu entnehmen, wenn sie offiziell veröffentlicht wurde.
Browser-Präfix
Einige Browser benötigen einen Browser-Präfix für die Eigenschaft box-sizing. Um möglichst alle Browser abzudecken, kann man den CSS-Code für diese Browser mit zusätzlichen Präfixen erweitern. Ein Beispielcode.
.selektor {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* Sonstige CSS-Angaben */
}Der Internet-Explorer unterstützt ab der Version 8 die Eigenschaft box-sizing und benötigt keinen Browser-Präfix. Möchte man, dass das Layout bei früheren Versionen nicht zerstört wird, kann man mit conditional comments arbeiten.