Eigenschaft box-sizing

Die Eigenschaft box-sizing erlaubt es, die Art der Größenberechnung eines Elements zu ändern.

Standardmäßig erweitert das Hinzufügen von padding ein Element: Wenn wir eine Breite width von 100px und ein padding-left von 20px gesetzt haben, dann ist die tatsächliche Breite des Elements 120px.

Und wenn wir zusätzlich noch einen border-left von 10px setzen, wird die tatsächliche Breite des Elements 130px. Das heißt, padding und border erweitern den Block (sowohl in der Breite als auch in der Höhe). Dieses Verhalten kann mit box-sizing geändert werden.

Syntax

cssSelektor {
  box-sizing: content-box | border-box;
}

Werte

Standardwert: content-box.

Beispiel . Standardverhalten

Derzeit haben beide Blöcke die gleiche Höhe und Breite, jedoch hat der zweite Block padding gesetzt, der erste nicht. Sehen Sie, wie sich ihre Größen unterscheiden:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  margin-bottom: 10px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Beispiel . Standardverhalten

Derzeit haben beide Blöcke die gleiche Höhe und Breite, jedoch hat der zweite Block einen Rand von 10px, der erste nicht. Sehen Sie, wie sich ihre Größen unterscheiden:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Beispiel . Standardverhalten

Der zweite Block hat jetzt sowohl padding als auch einen Rand von 10px:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  padding: 50px;
  border: 20px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Beispiel . Wert border-box

Fügen wir dem zweiten Element den Wert border-box für die Eigenschaft box-sizing hinzu. Jetzt werden die Abmessungen sowohl des ersten als auch des zweiten Elements gleich:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#elem1 {
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}
#elem2 {
  box-sizing: border-box;
  padding: 50px;
  border: 10px solid black;
  width: 300px;
  height: 100px;
  background: #f1f1f1;
}

Результат:

Siehe auch