CSS box-sizing Eigenschaft

Definition und Verwendung

Die Eigenschaft box-sizing ermöglicht es Ihnen, eine spezifische Art und Weise zu definieren, wie ein bestimmtes Element eine bestimmte Fläche matcht.

Zum Beispiel, wenn Sie zwei nebeneinander stehende, umrandete Kästen platzieren möchten, können Sie box-sizing auf "border-box" setzen. Dies lässt den Browser Kästen mit angegebenen Breite und Höhe darstellen und die Rahmen und Innenabstände in den Kästen platzieren.

Siehe auch:

CSS3-Tutorial:CSS3 Benutzeroberfläche

HTML DOM Referenzhandbuch:boxSizing-Eigenschaft

Beispiel

Definiert zwei nebeneinander stehende, umrandete Kästen:

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

Probieren Sie es selbst aus

Am unteren Ende der Seite gibt es mehr Beispiele.

CSS-Syntax

box-sizing: content-box|border-box|inherit;

Eigenschaftswert

Wert Beschreibung
content-box

Dies ist das Verhalten von Breite und Höhe, das von CSS2.1 festgelegt wurde.

Die Breite und Höhe werden auf den Inhalt des Elements angewendet.

Die Innenabstände und Rahmen des Elements werden außerhalb der Breite und Höhe gezeichnet.
border-box

Die Breite und Höhe des Elements bestimmen den Rahmenkasten des Elements.

Das bedeutet, dass jede angegebene Innenabstand und Rahmen des Elements innerhalb der festgelegten Breite und Höhe gezeichnet wird.

Die Breite und Höhe des Inhalts können durch das Abziehen der Ränder und des Innenraums von der festgelegten Breite und Höhe erhalten werden.
inherit Die Eigenschaft box-sizing soll vom übergeordneten Element geerbt werden.

Technische Details

Standardwert: content-box
Vererbbarkeit: nein
Version: CSS3
JavaScript-Syntax: object.style.boxSizing="border-box"

Browser-Unterstützung

Die Zahlen in der Tabelle geben die erste Browser-Version an, die die Eigenschaft vollständig unterstützt.

Zahlen mit -webkit- oder -moz- als Präfix stellen die erste Version dar, die den Präfix verwendet.

Chrome IE / Edge Firefox Safari Opera
10.0
4.0 -webkit-		 8.0 29.0
2.0 -moz-		 5.1
3.2 -webkit-		 9.5