Svojstvo box-sizing

Svojstvo box-sizing omogućava da se promeni način izračunavanja dimenzija elementa.

Podrazumevano, dodavanje padding proširuje element: ako smo zadali širinu width od 100px i padding-left od 20px, onda će stvarna širina elementa biti 120px.

A ako zadamo još i border-left od 10px, onda će stvarna širina elementa postati 130px. To jest, padding i border proširuju blok (i po širini, i po visini). Ovo ponašanje se može promeniti pomoću box-sizing.

Sintaksa

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

Vrednosti

Vrednost	Opis
`content-box`	I `padding`, i `border` proširuju blok.
`border-box`	Ni `padding`, ni `border` ne proširuju blok.

Podrazumevana vrednost: content-box.

Primer . Standardno ponašanje

Trenutno oba bloka imaju istu visinu i širinu, međutim kod drugog bloka je zadat padding, a kod prvog - nije. Pogledajte kako se razlikuju njihove dimenzije:

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

Primer . Standardno ponašanje

Trenutno oba bloka imaju istu visinu i širinu, međutim kod drugog bloka je zadata granica od 10px, a kod prvog - nije. Pogledajte, kako se razlikuju njihove dimenzije:

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

Primer . Standardno ponašanje

Trenutno drugi blok ima i padding, i granicu od 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;
}

Primer . Vrednost border-box

Dodajmo drugom elementu vrednost border-box za svojstvo box-sizing. Sada će dimenzije i prvog i drugog elementa postati jednake:

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

Pogledajte takođe

svojstvo outline,
koje pravi granicu koja ne proširuje element