box-sizing

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

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: rgba(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 das Inhaltselement angewendet. Wenn das Element einen Rahmen oder eine Auffüllung (Padding) hat, wird dies zur width und height hinzugefügt, um die Größe des auf dem Bildschirm gerenderten Rahmens zu erhalten. Das bedeutet, dass Sie beim Festlegen von width und height den Wert anpassen müssen, um eventuelle hinzukommende Ränder oder Auffüllungen zu berücksichtigen. Wenn Sie beispielsweise vier Rahmen mit width: 25%; haben, passen diese nicht standardmäßig auf eine Zeile innerhalb der Grenzen des übergeordneten Containers, wenn einer davon eine linke oder rechte Auffüllung oder einen linken oder rechten Rand hat.

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

  • content-box gibt Ihnen das standardmäßige CSS Box-Sizing-Verhalten. Wenn Sie die Breite eines Elements auf 100 Pixel setzen, wird die Inhaltsbox des Elements 100 Pixel breit sein, und die Breite eines Rahmens oder einer 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 in die von Ihnen angegebenen Werte für die Breite und Höhe eines Elements einzubeziehen. Wenn Sie die Breite eines Elements auf 100 Pixel setzen, werden diese 100 Pixel jeden hinzugefügten Rahmen oder jede Auffüllung umfassen, und die Inhaltsbox schrumpft, um diese zusätzliche Breite aufzunehmen. Dies macht es in der Regel viel einfacher, Elemente zu dimensionieren.

    box-sizing: border-box ist die Standardformatierung, die 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.

Hinweis: Es ist oft nützlich, box-sizing auf border-box zu setzen, um Elemente zu layouten. Dies macht den Umgang mit den Größen von Elementen wesentlich einfacher und beseitigt im Allgemeinen eine Reihe von Fallstricken, auf die Sie beim Layouten Ihres Inhalts stoßen können. Andererseits ermöglicht die Verwendung von box-sizing: content-box bei Verwendung von position: relative oder position: absolute, dass die Positionierungswerte relativ zum Inhalt und unabhängig von Änderungen der Rahmen- und Auffüllungsgrößen sind, was manchmal wünschenswert ist.

Syntax

css
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 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 vom CSS-Standard angegeben wird. Die width und height Eigenschaften beinhalten den Inhalt, jedoch nicht die Auffüllung, den Rahmen oder den Rand. Zum Beispiel rendert .box {width: 350px; border: 10px solid black;} einen Rahmen, der 370px breit ist.

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

border-box

Die width und height Eigenschaften beinhalten den Inhalt, die Auffüllung und den Rahmen, jedoch nicht den Rand. Beachten Sie, dass Auffüllung und Rahmen innerhalb des Rahmens liegen. Zum Beispiel rendert .box {width: 350px; border: 10px solid black;} einen Rahmen, der 350px breit ist, mit einem Inhaltsbereich von 330px Breite. Die Inhaltsbox kann nicht negativ sein und wird auf 0 gerundet, wodurch es unmöglich ist, mit border-box das Element verschwinden zu lassen.

Hier werden die Dimensionen des Elements wie folgt berechnet: width = Rahmen + Auffüllung + Breite des Inhalts, und height = Rahmen + Auffüllung + Höhe des Inhalts.

Formale Definition

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

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

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

CSS

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

Specification
CSS Box Sizing Module Level 3
# box-sizing

Browser-Kompatibilität

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Siehe auch