box-sizing

Die CSS Eigenschaft box-sizing legt fest, wie die Gesamtbreite und -höhe eines Elements berechnet wird.

Im CSS box model wird die Breite width und die Höhe height, die Sie einem Element zuweisen, standardmĂ€ĂŸig nur auf die Inhaltsbox des Elements angewendet. Wenn das Element ĂŒber einen Rahmen border oder InnenabstĂ€nde padding verfĂŒgt, wird diese zu der Breite width und Höhe height hinzugefĂŒgt, um die GrĂ¶ĂŸe der Box zu erreichen, die auf dem Bildschirm angezeigt wird. Das bedeutet, dass Sie bei der Einstellung von Breite width und Höhe height den Wert anpassen mĂŒssen, um einen eventuell hinzugefĂŒgten Rahmen oder AuffĂŒllen zu berĂŒcksichtigen. Wenn Sie z.B. vier Boxen mit einer Breite width: 25%; haben, wenn eine davon einen linken oder rechten Rand oder einen linken oder rechten Rand hat, passen sie standardmĂ€ĂŸig nicht auf eine Zeile innerhalb der BeschrĂ€nkungen des Elterncontainers.

Die box-sizing Eigenschaft kann verwendet werden, um dieses Verhalten anzupassen:

  • content-box gibt Ihnen das standardmĂ€ĂŸige CSS-Box-GrĂ¶ĂŸenverhalten. Wenn Sie die Breite eines Elements auf 100 Pixel setzen, dann wird die Inhaltsbox des Elements 100 Pixel breit sein, und die Breite von Rahmen oder AuffĂŒllungen wird zur endgĂŒltigen gerenderten Breite hinzugefĂŒgt, wodurch das Element breiter als 100px wird.
  • border-box

    weist den Browser an, bei den Werten, die Sie fĂŒr die Breite und Höhe eines Elements angeben, alle RĂ€nder und AuffĂŒllungen zu berĂŒcksichtigen. Wenn Sie die Breite eines Elements auf 100 Pixel festlegen, werden diese 100 Pixel alle von Ihnen hinzugefĂŒgten RĂ€nder oder FĂŒllungen enthalten, und das Inhaltsfeld wird verkleinert, um diese zusĂ€tzliche Breite zu absorbieren. Dadurch wird die GrĂ¶ĂŸenanpassung von Elementen normalerweise viel einfacher.

Hinweis: Es ist oft nĂŒtzlich, bei Layoutelementen die box-sizing auf border-box zu setzen. Dies erleichtert den Umgang mit der GrĂ¶ĂŸe von Elementen erheblich und eliminiert im Allgemeinen eine Reihe von Fallstricken, auf die Sie beim Layouten Ihres Inhalts stoßen können.  Bei der Verwendung von position: relative oder position: absolute und der Nutzung von box-sizing: content-box können die Positionswerte relativ zum Inhalt und unabhĂ€ngig von Änderungen der Rahmen- und FĂŒllungsgrĂ¶ĂŸen eingestellt werden, was manchmal wĂŒnschenswert ist.

Syntax

Das box-sizing Eigenschaft wird als ein einzelnes SchlĂŒsselwort angegeben, das aus der untenstehenden Liste von Werten ausgewĂ€hlt wird.

/* SchlĂŒsselwortwerte */
box-sizing: content-box;
box-sizing: border-box;

/* Globale Werte */
box-sizing: inherit;
box-sizing: initial;
box-sizing: unset;

Werte

content-box
Dies ist der Standard-Stil, der vom CSS Standard definiert wurde. Die Werte width und height berechnen sich nur aus dem Inhalt des Elementes und enthalten weder border, margin oder padding.
border-box
Die Werte width und height enthalten padding und border, aber nicht margin. Das ist das Boxmodell, das der Internet Explorer im Quirks mode verwendet.

Formale Definition

Initialwertcontent-box
Anwendbar aufalle Elemente, die Breite oder Höhe akzeptieren
VererbtNein
Berechneter Wertwie angegeben
Animationstypdiskret

Formal syntax

content-box | border-box

Beispiele

Box sizes mit content-box und border-box

Dieses Beispiel zeigt, wie unterschiedliche box-sizing Werte die gerenderte GrĂ¶ĂŸe von zwei ansonsten identischen Elementen verĂ€ndern.

HTML

<div class="content-box">Content box</div>
<br>
<div class="border-box">Border box</div>

CSS

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

Result

Spezifikationen

Spezifikation Status Kommentar
CSS Basic User Interface Module Level 3
Die Definition von 'box-sizing' in dieser Spezifikation.
Empfehlung UrsprĂŒngliche Definition

Browser KompabilitÀt

BCD tables only load in the browser

Siehe auch