box-sizing

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

Im CSS-Boxmodell wird standardmäßig die von Ihnen einem Element zugewiesene width und height nur auf das Inhaltsfeld des Elements angewendet. Hat das Element einen Rand oder eine Auffüllung, wird diese zur width und height hinzugefügt, um die auf dem Bildschirm gerenderte Boxgröße zu erreichen. Das bedeutet, dass Sie beim Festlegen von width und height den Wert anpassen müssen, den Sie angeben, um eventuelle Ränder oder Auffüllungen zu berücksichtigen, die hinzugefügt werden könnten. Wenn Sie zum Beispiel vier Boxen mit width: 25%; haben und eine davon eine linke oder rechte Auffüllung oder einen linken oder rechten Rand hat, passen sie standardmäßig nicht in eine Zeile innerhalb der Einschränkungen des übergeordneten Containers.

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

• content-box bietet das standardmäßige CSS-Box-Sizing-Verhalten. Wenn Sie die Breite eines Elements auf 100 Pixel setzen, dann ist das Inhaltsfeld des Elements 100 Pixel breit und die Breite jedes Randes oder jeder Auffüllung wird zur endgültigen gerenderten Breite hinzugefügt, was das Element breiter als 100px macht.

• border-box weist den Browser an, jeden Rand und jede Auffüllung 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 festlegen, dann beinhalten diese 100 Pixel jeden hinzugefügten Rand oder jede Auffüllung, und das Inhaltsfeld wird verkleinert, um diese zusätzliche Breite aufzunehmen. Dadurch wird es in der Regel viel einfacher, Elemente zu dimensionieren.

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

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;

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

Werte

content-box

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

Hier werden die Abmessungen des Elements berechnet als: width = Breite des Inhalts und height = Höhe des Inhalts. (Ränder und Auffüllungen werden in die Berechnung nicht einbezogen.)

border-box

Die width und height-Eigenschaften umfassen den Inhalt, die Auffüllung und den Rand, jedoch nicht den Abstand. Beachten Sie, dass Auffüllung und Rand 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. Das Inhaltsfeld 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 Abmessungen des Elements berechnet als: width = Rand + Auffüllung + Breite des Inhalts und height = Rand + Auffüllung + Höhe des Inhalts.

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