Vlastnosť box-sizing

Vlastnosť box-sizing umožňuje meniť spôsob výpočtu rozmerov elementu.

Predvolene pridanie padding rozširuje element: ak sme nastavili šírku width 100px a padding-left na 20px, tak skutočná šírka elementu bude 120px.

A ak nastavíme aj border-left na 10px, tak skutočná šírka elementu sa stane 130px. To znamená, že padding a border rozširujú blok (aj po šírke, aj po výške). Toto správanie je možné zmeniť pomocou box-sizing.

Syntax

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

Hodnoty

Hodnota	Popis
`content-box`	Aj `padding`, aj `border` rozširujú blok.
`border-box`	Ani `padding`, ani `border` nerozširujú blok.

Predvolená hodnota: content-box.

Príklad . Štandardné správanie

Teraz majú oba bloky rovnakú výšku a šírku, avšak druhý blok má nastavený padding, kým prvý - nie. Pozrite sa, ako sa líšia ich rozmery:

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

Príklad . Štandardné správanie

Teraz majú oba bloky rovnakú výšku a šírku, avšak druhý blok má nastavený okraj 10px, kým prvý - nie. Pozrite sa, ako sa líšia ich rozmery:

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

Príklad . Štandardné správanie

Teraz má druhý blok aj padding, aj 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;
}

Príklad . Hodnota border-box

Pridajme druhému elementu hodnotu border-box pre vlastnosť box-sizing. Teraz sa rozmery prvého aj druhého elementu stanú rovnaký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;
}

Pozrite tiež

vlastnosť outline,
ktorá vytvára okraj, ktorý nerozširuje element