box-sizing

box-sizing: content-box;
width: 100%;

box-sizing: content-box;
width: 100%;
border: solid #5b6dcd 10px;
padding: 5px;

box-sizing: border-box;
width: 100%;
border: solid #5b6dcd 10px;
padding: 5px;

<section id="default-example">
  <div id="example-element-parent">
    <p>Parent container</p>
    <div class="transition-all" id="example-element">
      <p>Child container</p>
    </div>
  </div>
</section>

#example-element-parent {
  width: 220px;
  height: 200px;
  border: solid 10px #ffc129;
  margin: 0.8em;
}

#example-element {
  height: 60px;
  margin: 2em auto;
  background-color: rgb(81 81 81 / 0.6);
}

#example-element > p {
  margin: 0;
}

Standardmäßig im CSS-Box-Modell wird die width und height, die Sie einem Element zuweisen, nur auf die Inhaltsbox des Elements angewendet. Wenn das Element einen Rahmen oder eine Auffüllung hat, wird dies dann zur width und height hinzugefügt, um die auf dem Bildschirm angezeigte Größe der Box zu bestimmen. Das bedeutet, dass Sie beim Setzen von width und height den Wert anpassen müssen, um einen möglichen Rahmen oder eine Auffüllung zu berücksichtigen. Wenn Sie zum Beispiel vier Boxen mit width: 25%; haben, wird bei jeglicher links oder rechts vorhandener Auffüllung oder Rahmen diese standardmäßig nicht in einer Zeile innerhalb der Begrenzungen des übergeordneten Containers passen.

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

• content-box bietet Ihnen das standardmäßige Box-Modell-Verhalten von CSS. Wenn Sie die Breite eines Elements auf 100 Pixel setzen, wird die Inhaltsbox des Elements 100 Pixel breit sein und die Breite jedes Rahmens oder jeder Auffüllung wird zur endgültigen Breite hinzugefügt, wodurch das Element breiter als 100px wird.

• border-box weist den Browser an, jeden Rahmen und jede Auffüllung bei den Werten, die Sie für Breite und Höhe eines Elements angeben, zu berücksichtigen. Wenn Sie die Breite eines Elements auf 100 Pixel setzen, beinhalten diese 100 Pixel jede hinzugefügte Auffüllung oder jeden Rahmen, und die Inhaltsbox wird sich anpassen, um diese zusätzliche Breite aufzunehmen. Dies erleichtert in der Regel die Größenanpassung von Elementen erheblich.

  box-sizing: border-box ist die Standardstilvorgabe, 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 einzelnes Schlüsselwort aus der unten stehenden Liste von Werten angegeben.

content-box

Dies ist der Anfangs- und Standardwert, wie er durch den CSS-Standard festgelegt ist. Die width und height-Eigenschaften beinhalten den Inhalt, jedoch nicht die Auffüllung, den Rahmen oder den Abstand. Zum Beispiel rendert .box {width: 350px; border: 10px solid black;} eine Box, die 370px breit ist.

Hier werden die Dimensionen des Elements berechnet als: breite = Breite des Inhalts und höhe = Höhe des Inhalts. (Rahmen und Auffüllungen sind in der Berechnung nicht enthalten.)

border-box

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

Hier werden die Dimensionen des Elements berechnet als: breite = Rahmen + Auffüllung + Breite des Inhalts und höhe = Rahmen + Auffüllung + Höhe des Inhalts.

box-sizing = 
  content-box  |
  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 */
}

Ergebnis

• CSS-Box-Modell