CSS-Eigenschaft box-sizing

❮ Vorige Nächste ❯

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>

Versuch es selber!

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>

Versuch es selber!

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.