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

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

Werte

Wert	Beschreibung
`content-box`	Sowohl `padding` als auch `border` erweitern den Block.
`border-box`	Weder `padding` noch `border` erweitern den Block.

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:

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

#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:

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

#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:

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

#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:

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

#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

die Eigenschaft outline,
die einen Rand erzeugt, der das Element nicht erweitert