A box-sizing tulajdonság

A box-sizing tulajdonság lehetővé teszi az elem méreteinek számítási módjának megváltoztatását.

Alapértelmezetten a padding hozzáadása kiterjeszti az elemet: ha beállítottuk a szélességet width 100px értékre és a padding-left értékét 20px értékre, akkor az elem valódi szélessége 120px lesz.

És ha beállítjuk a border-left értékét is 10px értékre, akkor az elem valódi szélessége 130px lesz. Vagyis a padding és a border kiterjeszti a blokkot (mind szélességben, mind magasságban). Ezt a viselkedést megváltoztathatjuk a box-sizing segítségével.

Szintaxis

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

Értékek

Érték	Leírás
`content-box`	Mind a `padding`, mind a `border` kiterjeszti a blokkot.
`border-box`	Sem a `padding`, sem a `border` nem terjeszti ki a blokkot.

Alapértelmezett érték: content-box.

Példa . Alapértelmezett viselkedés

Jelenleg mindkét blokknak azonos a magassága és szélessége, azonban a második blokknak padding van beállítva, az elsőnek pedig - nincs. Nézze meg, mennyire különböznek a méreteik:

<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élda . Alapértelmezett viselkedés

Jelenleg mindkét blokknak azonos a magassága és szélessége, azonban a második blokknak van egy 10px széles szegély beállítva, az elsőnek pedig - nincs. Nézze meg, mennyire különböznek a méreteik:

<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élda . Alapértelmezett viselkedés

Jelenleg a második blokknak van padding-je és 10px széles szegélye is:

<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élda . A border-box érték

Adjuk hozzá a második elemhez a border-box értéket a box-sizing tulajdonsághoz. Mostantól a méretek az első és a második elemnél is azonosak lesznek:

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

Lásd még

a outline tulajdonság,
amely olyan szegélyt készít, amely nem terjeszti ki az elemet