CSS-Eigenschaft box-sizing

Die Eigenschaft box-sizing definiert die Berechnung von width und height eines Elements, wenn sie padding und borders beinhaltet.

Die Eigenschaften width und height eines Elements werden standardmäßig wie folgt berechnet:

  • width + padding + border = tatsächliche Breite eines Elements
  • height + padding + border = tatsächliche Höhe eines Elements

Wenn also die Breite und Höhe eines Elements definiert ist, erscheint das Element oft größer als es eingestellt wurde (weil border und padding des Elements zur angegebenen Breite und Höhe des Elements hinzugefügt werden).

Anfangswert content-box
Gilt für Alle Elemente, die Breite und Höhe akzeptieren.
Geerbt Nein
Animierbar Nein
Version CSS3
DOM Syntax object.style.boxSizing = "border-box";

Syntax

box-sizing: content-box | border-box | initial | inherit;

In diesem Beispiel sind zwei Elemente <div> mit gleichen width und height: dargestellt.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style> 
      .div1 {
      box-sizing: content-box;
      width: 400px;
      height: 50px;
      padding: 50px;
      border: 5px double #1c87c9;
      }
      .div2 {
      box-sizing: border-box;
      width: 400px;
      height: 50px;  
      padding: 50px;
      border: 5px dashed #8ebf42;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für box-sizing</h2><hr />
    <h3>box-sizing: content-box (voreingestellt):</h3>
    <div class="div1">Die Breite für dieses Element div ist auf 400px eingestellt. Somit beträgt die volle Breite 400px + 10px (linker und rechter Rand) + 100px (linke und rechte Polsterung) = 510px.</div>
    <br>
    <h3>box-sizing: border-box:</h3>
    <div class="div2">ie Breite und Höhe gilt für alle Teile des Elements div: Die volle Breite beträgt 400px.</div>
  </body>
</html>

Wenn box-sizing als content-box definiert ist, wird die volle Breite mehr als die definierte Breite von div. Und wenn box-sizing: border-box definiert ist, padding und border werden in width und height aufgenommen.

Lassen Sie uns ein weiteres Beispiel mit zwei umrandeten Boxen, die nebeneinander definiert sind, sehen.

Beispiel

<!DOCTYPE html>
<html>
  <head>
    <style> 
      div.container {
      width: 100%;
      border: 2px double #1c87c9;
      }
      div.box {
      box-sizing: border-box;
      width: 50%;
      border: 3px solid #ccc;
      float: left;
      padding: 3px;
      }
    </style>
  </head>
  <body>
    <h2>Beispiel für box-sizing</h2>
    <p>Hier sehen Sie zwei umrahmte Boxen, die nebeneinander definiert sind.</p>
    <div class="container">
      <div class="box">Linker Teil</div>
      <div class="box">Rechter Teil</div>
      <div style="clear:both;"></div>
    </div>
  </body>
</html>

Werte

Wert Beschreibung
content-box Die Eigenschaften width und height beinhalten den Content, aber padding, border oder sind nicht eingeschlossen. Es ist der Standardwert.
border-box Die Eigenschaften width und height beinhalten den content, padding und border, aber margin ist nicht eingeschlossen.
initial Es setzt die Eigenschaft auf seinen Standardwert.
inherit Es erbt die Eigenschaft von ihrem übergeordneten Element.

Browser-Support

chrome edge firefox safari opera
10.0+
4.0-9.0 -wbkit-
12.0+ 29.0+
2.0-28.0 -moz-
5.1+
3.1-5.0 -webkit-
10.0+

Übe dein Wissen

Was bewirkt die CSS-Eigenschaft 'box-sizing'?
Finden Sie das nützlich?