CSS box-sizing Eigenschaft

Die box-sizing-Eigenschaft steuert, wie die width und height eines Elements berechnet werden — konkret, ob padding und border innerhalb dieser Maße gezählt oder zusätzlich zu ihnen addiert werden. Sie ist eine der CSS3-Eigenschaften.

Diese Seite erklärt den Unterschied zwischen den beiden Box-Modellen (content-box und border-box), warum border-box für die meisten Layouts der moderne Standard ist und wie man es auf eine gesamte Seite anwendet.

Wie das Box-Modell die Größe beeinflusst

Standardmäßig (content-box) legen width und height nur die Größe des Inhaltsbereichs fest. Padding und Border werden dann obendrauf addiert, sodass die gerenderte Box größer ist als der angegebene Wert:

Breite + Padding + Border = gerenderte Breite des Elements
Höhe + Padding + Border = gerenderte Höhe des Elements

Eine Box mit width: 400px, padding: 50px auf jeder Seite und einem 5px-Border auf jeder Seite belegt beispielsweise 400 + 100 + 10 = 510px an horizontalem Platz. Dies ist eine häufige Quelle von Layout-Fehlern: Zwei 50%-breite Spalten mit beliebigem Padding oder Border passen nicht nebeneinander, weil jede breiter als die Hälfte des Containers wird.

Mit box-sizing: border-box werden Padding und Border stattdessen in die deklarierte Breite und Höhe eingerechnet. Ein width: 50%-Element bleibt exakt halb so breit wie der Container, egal wie viel Padding oder Border hinzugefügt wird — deshalb setzen die meisten Stylesheets jedes Element auf border-box.

Anfangswert	content-box
Gilt für	Alle Elemente, die Breite und Höhe akzeptieren.
Vererbbar	Nein.
Animierbar	Nein.
Version	CSS3
DOM-Syntax	object.style.boxSizing = "border-box";

Syntax

Syntax der CSS box-sizing-Eigenschaft

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

Das folgende Beispiel zeigt zwei <div>-Elemente mit identischen Deklarationen für width, height, padding und border — sie unterscheiden sich nur im Wert von box-sizing, was ausreicht, damit sie in unterschiedlichen Größen gerendert werden:

Beispiel der box-sizing-Eigenschaft

Beispiel der CSS box-sizing-Eigenschaft mit den Werten content-box und border-box

<!DOCTYPE html>
<html>
  <head>
    <style>
      .div1 {
        box-sizing: content-box;
        width: 400px;
        height: 50px;
        padding: 50px;
        border: 5px double #1c87c9;
      }
      .div2 {
        box-sizing: border-box;
        width: 400px;
        height: 50px;
        padding: 50px;
        border: 5px dashed #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Box-sizing Example</h2>
    <hr />
    <h3>box-sizing: content-box (default):</h3>
    <div class="div1">The width for this div is set as 400px. Thus, the full width is 400px + 10px (left and right border) + 100px (left and right padding) = 510px.</div>
    <br />
    <h3>box-sizing: border-box:</h3>
    <div class="div2">The width and height apply to all parts of the div element: The full width is 400px.</div>
  </body>
</html>

Probier es selbst »

Ergebnis

Mit content-box ist die gerenderte Box breiter als die deklarierte width, da Padding und Border hinzuaddiert werden. Mit border-box werden Padding und Border in die deklarierte width und height eingerechnet, sodass die Box exakt in der angegebenen Größe bleibt.

border-box ist der Wert, auf den man beim Erstellen von Layouts am häufigsten zurückgreift. Er macht Elementgrößen vorhersehbar und beseitigt eine ganze Klasse von Problemen — man kann Padding oder einen Border hinzufügen, ohne Breiten neu berechnen zu müssen.

Beispiel zweier nebeneinander platzierter Boxen mit Border

Hier ermöglicht border-box, dass zwei 50%-breite gefloatete Boxen nebeneinander sitzen, obwohl jede einen eigenen Border und Padding hat. Mit dem Standard-content-box würden Border und Padding die kombinierte Breite über 100% hinaus vergrößern und die zweite Box in eine neue Zeile zwingen.

Beispiel der CSS box-sizing-Eigenschaft mit dem Wert border-box

<!DOCTYPE html>
<html>
  <head>
    <style>
      div.container {
        width: 100%;
        border: 2px double #1c87c9;
      }
      div.box {
        box-sizing: border-box;
        width: 50%;
        border: 3px solid #ccc;
        float: left;
        padding: 3px;
      }
    </style>
  </head>
  <body>
    <h2>Box-sizing Example</h2>
    <p>Here you can see two bordered boxes defined side by side.</p>
    <div class="container">
      <div class="box">Left part</div>
      <div class="box">Right part</div>
      <div style="clear:both;"></div>
    </div>
  </body>
</html>

Probier es selbst »

border-box auf die gesamte Seite anwenden

Anstatt box-sizing für einzelne Elemente festzulegen, wenden die meisten Projekte es einmalig mit dem universellen Selektor auf alle Elemente an. Dies ist das am häufigsten verwendete CSS-Reset in modernen Stylesheets:

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

Die Selektoren *::before und *::after stellen sicher, dass generierte Inhaltsboxen derselben Regel folgen. Nach diesem Reset bedeuten width und height überall "die Gesamtgröße einschließlich Padding und Border", was den meisten Menschen intuitiv entspricht.

Browser-Unterstützung

box-sizing wird in allen modernen Browsern unterstützt, einschließlich aktueller Versionen von Chrome, Firefox, Safari und Edge. Es ist eine stabile CSS3-Funktion und benötigt für heutige Browser keine Vendor-Präfixe.

Werte

Wert	Beschreibung
content-box	Die Eigenschaften width und height umfassen den Inhalt, jedoch nicht Padding, Border oder Margin. Dies ist der Standardwert.
border-box	Die Eigenschaften width und height umfassen Inhalt, Padding und Border, jedoch nicht die Margin.
initial	Setzt die Eigenschaft auf ihren Standardwert.
inherit	Erbt die Eigenschaft vom übergeordneten Element.

Übung

Was bewirkt die CSS-Eigenschaft 'box-sizing'?

Sie ermöglicht es, Padding und Border in die Gesamtbreite und -höhe eines Elements einzuberechnen.Sie legt die Farbe einer Box fest.Sie dient zur Berechnung der Breite und Höhe eines Elements.Sie wird verwendet, um die Margin eines Elements festzulegen.Sie verhindert, dass eine Box ihren Inhalt überläuft.