Właściwość box-sizing

Właściwość box-sizing pozwala zmieniać sposób obliczania wymiarów elementu.

Domyślnie dodanie padding rozszerza element: jeśli ustawiliśmy szerokość width na 100px i padding-left na 20px, to rzeczywista szerokość elementu wyniesie 120px.

A jeśli ustawimy jeszcze border-left na 10px, to rzeczywista szerokość elementu stanie się 130px. Czyli padding i border rozszerzają blok (zarówno pod względem szerokości, jak i wysokości). To zachowanie można zmienić za pomocą box-sizing.

Składnia

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

Wartości

Wartość	Opis
`content-box`	Zarówno `padding`, jak i `border` rozszerzają blok.
`border-box`	Ani `padding`, ani `border` nie rozszerzają bloku.

Wartość domyślna: content-box.

Przykład . Zachowanie domyślne

Obecnie oba bloki mają tę samą wysokość i szerokość, jednak drugi blok ma ustawiony padding, a pierwszy nie. Zobacz, jak różnią się ich rozmiary:

<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;
}

Przykład . Zachowanie domyślne

Obecnie oba bloki mają tę samą wysokość i szerokość, jednak drugi blok ma ustawione obramowanie o szerokości 10px, a pierwszy nie. Zobacz, jak różnią się ich rozmiary:

<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;
}

Przykład . Zachowanie domyślne

Obecnie drugi blok ma zarówno padding, jak i obramowanie o szerokości 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;
}

Przykład . Wartość border-box

Dodajmy drugiemu elementowi wartość border-box dla właściwości box-sizing. Teraz wymiary zarówno pierwszego, jak i drugiego elementu staną się takie same:

<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;
}

Zobacz też

właściwość outline,
która tworzy obramowanie nie rozszerzające elementu