box-sizing CSS property

Probieren Sie es aus

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;
}

Syntax

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;

Werte

Diese Eigenschaft wird als eines der folgenden Schlüsselwort-Werte spezifiziert:

content-box

Dies ist der initiale und Standardwert, wie im CSS-Standard angegeben. Die width- und height-Eigenschaften umfassen den Inhalt, schließen jedoch nicht das Padding, den Rahmen oder den Rand ein. Zum Beispiel rendert .box {width: 350px; border: 10px solid black;} eine Box, die 370px breit ist.

Hier werden die Abmessungen des Elements berechnet als: Breite = Breite des Inhalts und Höhe = Höhe des Inhalts. (Rahmen und Padding sind nicht in der Berechnung enthalten.)

border-box

Die width- und height-Eigenschaften umfassen den Inhalt, das Padding und den Rahmen, schließen jedoch den Rand nicht ein. Beachten Sie, dass Padding 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. Der Inhaltsbereich kann nicht negativ sein und wird auf 0 gerundet, was es unmöglich macht, border-box zu verwenden, um das Element verschwinden zu lassen.

Hier werden die Abmessungen des Elements berechnet als: Breite = Rahmen + Padding + Breite des Inhalts und Höhe = Rahmen + Padding + Höhe des Inhalts.

Beschreibung

Im Standard-CSS-Boxmodell wird die von Ihnen einem Element zugewiesene width und height nur auf das Inhaltsfeld des Elements angewendet. Wenn das Element einen Rahmen oder ein Padding hat, wird dies dann zur width und height hinzugefügt, um die Größe der auf dem Bildschirm angezeigten Box zu bestimmen. Dies bedeutet, dass, wenn Sie width und height festlegen, Sie den angegebenen Wert anpassen müssen, um jedwedes hinzugefügte Padding oder den Rahmen zu berücksichtigen. Wenn Sie beispielsweise vier Boxen mit width: 25%; haben und eine von ihnen hat links oder rechts Padding oder einen linken oder rechten Rahmen, passen sie nicht standardmäßig in einer Zeile innerhalb der Einschränkungen des übergeordneten Containers.

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

• content-box bietet Ihnen das standardmäßige CSS-Box-Sizing-Verhalten. Wenn Sie die Breite eines Elements auf 100 Pixel setzen, wird das Inhaltsfeld des Elements 100 Pixel breit sein, und die Breite eines Rahmens oder Paddings wird zur endgültigen Breite hinzugefügt, was das Element breiter als 100px macht.

• border-box teilt dem Browser mit, dass er einen Rahmen und Padding in den von Ihnen festgelegten Werten für die Breite und Höhe eines Elements berücksichtigen soll. Wenn Sie die Breite eines Elements auf 100 Pixel setzen, umfassen diese 100 Pixel jedwedes hinzugefügte Padding oder Rahmen, und das Inhaltsfeld wird verkleinert, um diese zusätzliche Breite aufzunehmen. Dies macht es in der Regel viel einfacher, Elemente zu dimensionieren.

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

Formale Definition

Formale Syntax

box-sizing = 
  content-box  |
  border-box   

Beispiele

Boxgrößen 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 */
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS-Box-Modell