box-sizing

Im CSS Box-Modell wird die von Ihnen zugewiesene width und height standardmäßig nur auf die Inhaltsbox eines Elements angewendet. Wenn das Element einen Rahmen oder Innenabstand hat, wird dieser zu width und height hinzugefügt, um die Größe der Box zu erhalten, die auf dem Bildschirm angezeigt wird. Das bedeutet, dass Sie bei der Festlegung von width und height den von Ihnen angegebenen Wert anpassen müssen, um den hinzugefügten Rahmen oder Innenabstand zu berücksichtigen. Wenn Sie beispielsweise vier Boxen mit width: 25%; haben und eine davon links oder rechts Innenabstand oder einen Rahmen hat, passen sie standardmäßig nicht in eine Zeile innerhalb der Begrenzungen des übergeordneten Containers.

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

• content-box bietet Ihnen das standardmäßige Verhalten der CSS-Boxgrößenbestimmung. Wenn Sie die Breite eines Elements auf 100 Pixel setzen, ist die Inhaltsbox des Elements 100 Pixel breit, und die Breite eines Rahmens oder Innenabstands wird zur endgültigen angezeigten Breite hinzugefügt, wodurch das Element breiter als 100px wird.

• border-box weist den Browser an, jeden Rahmen und Innenabstand in den von Ihnen angegebenen Werten für die Breite und Höhe eines Elements zu berücksichtigen. Wenn Sie die Breite eines Elements auf 100 Pixel setzen, beinhalten diese 100 Pixel jeden hinzugefügten Rahmen oder Innenabstand, und die Inhaltsbox wird verkleinert, um die zusätzliche Breite aufzunehmen. Dies macht es in der Regel viel einfacher, Elemente zu dimensionieren.

  box-sizing: border-box ist die standardmäßige Gestaltung, die Browser für die <table>, <select>, und <button> Elemente sowie für <input> Elemente verwenden, deren Typ radio, checkbox, reset, button, submit, color oder search ist.

box-sizing: border-box;
box-sizing: content-box;

/* Global values */
box-sizing: inherit;
box-sizing: initial;
box-sizing: revert;
box-sizing: revert-layer;
box-sizing: unset;

Die box-sizing-Eigenschaft wird als ein einzelnes Schlüsselwort angegeben, das aus der unten stehenden Liste der Werte ausgewählt wird.

content-box

Dies ist der initiale und standardmäßige Wert, wie im CSS-Standard spezifiziert. Die width und height Eigenschaften umfassen den Inhalt, jedoch nicht den Innenabstand, den Rahmen oder den Rand. Zum Beispiel rendert .box {width: 350px; border: 10px solid black;} eine Box, die 370px breit ist.

Hier werden die Abmessungen des Elements wie folgt berechnet: width = Breite des Inhalts, und height = Höhe des Inhalts. (Rahmen und Innenabstand sind in der Berechnung nicht enthalten.)

border-box

Die width und height Eigenschaften umfassen den Inhalt, den Innenabstand und den Rahmen, jedoch nicht den Rand. Beachten Sie, dass Innenabstand und Rahmen innerhalb der Box liegen. Zum Beispiel rendert .box {width: 350px; border: 10px solid black;} eine Box, die 350px breit ist, wobei der Bereich für den Inhalt 330px breit ist. Die Inhaltsbox kann nicht negativ sein und wird auf 0 reduziert, wodurch es unmöglich ist, border-box zu verwenden, um das Element verschwinden zu lassen.

Hier werden die Abmessungen des Elements wie folgt berechnet: width = Rahmen + Innenabstand + Breite des Inhalts, und height = Rahmen + Innenabstand + Höhe des Inhalts.

box-sizing = 
  content-box  |
  border-box   

Dieses Beispiel zeigt, wie verschiedene 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 */
}

Ergebnis

• CSS Box-Modell