Vlastnost box-sizing

Vlastnost box-sizing umožňuje měnit způsob výpočtu velikosti elementu.

Ve výchozím nastavení přidání padding rozšiřuje element: pokud jsme nastavili šířku width 100px a padding-left na 20px, pak skutečná šířka elementu bude 120px.

A pokud nastavíme také border-left na 10px, pak skutečná šířka elementu bude 130px. To znamená, že padding a border rozšiřují blok (jak na šířku, tak na výšku). Toto chování lze změnit pomocí box-sizing.

Syntaxe

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

Hodnoty

Hodnota	Popis
`content-box`	Jak `padding`, tak `border` rozšiřují blok.
`border-box`	Ani `padding`, ani `border` nerozšiřují blok.

Výchozí hodnota: content-box.

Příklad . Standardní chování

Nyní mají oba bloky stejnou výšku a šířku, avšak u druhého bloku je nastaven padding, zatímco u prvního - ne. Podívejte se, jak se liší jejich velikosti:

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

Příklad . Standardní chování

Nyní mají oba bloky stejnou výšku a šířku, avšak u druhého bloku je nastaven okraj 10px, zatímco u prvního - ne. Podívejte se, jak se liší jejich velikosti:

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

Příklad . Standardní chování

Nyní má druhý blok jak padding, tak okraj 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;
}

Příklad . Hodnota border-box

Přidáme druhému elementu hodnotu border-box pro vlastnost box-sizing. Nyní se velikosti prvního i druhého elementu stanou stejnými:

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

Viz také

vlastnost outline,
která vytváří okraj, nerozšiřující element