box-sizing

Die CSS-Eigenschaft box-sizing steuert, wie das Box-Modell für das Element, auf das sie angewendet wird, behandelt wird.

.module {
  box-sizing: border-box;    
}

Eine der gängigsten Verwendungen ist die Anwendung auf alle Elemente der Seite, einschließlich Pseudo-Elementen

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

Dies wird oft als „universelles Box-Sizing“ bezeichnet und ist eine gute Arbeitsweise! Die (wörtliche) width, die Sie festlegen, ist die Breite, die Sie erhalten, ohne dass Sie mentale Berechnungen durchführen und die Komplexität verwalten müssen, die sich aus Breiten ergibt, die aus mehreren Eigenschaften stammen. Wir haben hier sogar einen Tag des Bewusstseins für Box-Sizing.

Werte

• content-box: der Standardwert. Breiten- und Höhenwerte beziehen sich nur auf den Inhalt des Elements. Der Innenabstand und der Rahmen werden außerhalb der Box hinzugefügt.
• padding-box: Breiten- und Höhenwerte beziehen sich auf den Inhalt und den Innenabstand des Elements. Der Rahmen wird außerhalb der Box hinzugefügt. Derzeit unterstützt nur Firefox den Wert padding-box.
• border-box: Breiten- und Höhenwerte beziehen sich auf den Inhalt, den Innenabstand und den Rahmen.
• inherit: erbt das Box-Sizing des übergeordneten Elements.

Beispiel

Dieses Beispielbild vergleicht die Standardeinstellung content-box (oben) mit border-box (unten)

Die rote Linie zwischen den Bildern repräsentiert den Breitenwert der Elemente. Beachten Sie, dass das Element mit dem Standardwert box-sizing: content-box; die deklarierte Breite überschreitet, wenn Innenabstand und Rahmen außerhalb der Inhaltsbox hinzugefügt werden, während das Element mit angewendetem box-sizing: border-box; vollständig innerhalb der deklarierten Breite liegt.

Box Sizing verwenden

Nehmen wir an, Sie setzen ein Element auf width: 100px; padding: 20px; border: 5px solid black;. Standardmäßig ist die resultierende Box 150 Pixel breit. Das liegt daran, dass das Standard-Box-Sizing-Modell content-box ist, das die deklarierte Breite eines Elements nur auf seinen Inhalt anwendet und Innenabstand und Rahmen außerhalb der Box des Elements platziert. Dies vergrößert effektiv den Platz, den das Element einnimmt.

Wenn Sie box-sizing auf padding-box ändern, wird der Innenabstand in die Box des Elements verschoben. Dann wäre die Box 110 Pixel breit, mit 20 Pixel Innenabstand innen und 10 Pixel Rahmen außen. Wenn Sie den Innenabstand *und* den Rahmen in die Box einbeziehen möchten, können Sie border-box verwenden. Die Box wäre dann 100 Pixel breit – die 10 Pixel Rahmen und 20 Pixel Innenabstand werden beide in die Box des Elements verschoben.

Demo

Weitere Informationen

• CSS-Tricks-Artikel über Box-Sizing
• CSS-Tricks-Artikel über geerbtes Box-Sizing
• MDN Docs
• Paul Irish über die universelle Verwendung von border-box

Browser-Unterstützung

Chrome	Safari	Firefox	Opera	IE	Android	iOS
Jede *†	3 *†	1 ‡	7 *	8 *	2.1 *†	Jede *

* padding-box wird nicht unterstützt

† ältere Versionen erfordern das -webkit-Präfix (Chrome 1-9, Safari 3-5, Android 2.1-3.x)

‡ -moz-Präfix erforderlich bis Version 28, ungeprefixelt ab 29.

Verwandt