Proprietatea box-sizing

Proprietatea box-sizing permite modificarea modului de calcul al dimensiunilor unui element.

În mod implicit, adăugarea padding extinde elementul: dacă am setat lățimea width la 100px și padding-left de 20px, atunci lățimea reală a elementului va fi 120px.

Iar dacă setăm și border-left de 10px, atunci lățimea reală a elementului va deveni 130px. Adică padding și border extind blocul (atât în lățime, cât și în înălțime). Acest comportament poate fi schimbat cu box-sizing.

Sintaxă

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

Valori

Valoare	Descriere
`content-box`	Atât `padding`, cât și `border` extind blocul.
`border-box`	Nici `padding`, nici `border` nu extind blocul.

Valoare implicită: content-box.

Exemplu . Comportamentul standard

Acum ambele blocuri au aceeași înălțime și lățime, însă celui de-al doilea bloc îi este setat padding, iar primului - nu. Uitați-vă cum diferă dimensiunile lor:

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

Exemplu . Comportamentul standard

Acum ambele blocuri au aceeași înălțime și lățime, însă celui de-al doilea bloc îi este setată o bordură de 10px, iar primului - nu. Uitați-vă, cum diferă dimensiunile lor:

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

Exemplu . Comportamentul standard

Acum al doilea bloc are atât padding, cât și bordură de 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;
}

Exemplu . Valoarea border-box

Adăugăm celui de-al doilea element valoarea border-box pentru proprietatea box-sizing. Acum dimensiunile atât ale primului cât și ale celui de-al doilea element vor deveni identice:

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

Vedeți și

proprietatea outline,
care face o bordură care nu extinde elementul