Proprietà box-sizing

La proprietà box-sizing permette di modificare il metodo di calcolo delle dimensioni di un elemento.

Per impostazione predefinita, l'aggiunta di padding espande l'elemento: se abbiamo impostato una larghezza width di 100px e un padding-left di 20px, allora la larghezza reale dell'elemento sarà di 120px.

E se impostiamo anche un border-left di 10px, allora la larghezza reale dell'elemento diventerà 130px. Cioè padding e border espandono il blocco (sia in larghezza che in altezza). Questo comportamento può essere modificato con box-sizing.

Sintassi

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

Valori

Valore	Descrizione
`content-box`	Sia `padding` che `border` espandono il blocco.
`border-box`	Né `padding` né `border` espandono il blocco.

Valore predefinito: content-box.

Esempio . Comportamento standard

Entrambi i blocchi hanno attualmente la stessa altezza e larghezza, tuttavia al secondo blocco è impostato padding, mentre al primo no. Guardate come differiscono le loro dimensioni:

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

Esempio . Comportamento standard

Entrambi i blocchi hanno attualmente la stessa altezza e larghezza, tuttavia al secondo blocco è impostato un bordo di 10px, mentre al primo no. Guardate, come differiscono le loro dimensioni:

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

Esempio . Comportamento standard

Attualmente il secondo blocco ha sia padding che bordo di 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;
}

Esempio . Valore border-box

Aggiungiamo al secondo elemento il valore border-box per la proprietà box-sizing. Ora le dimensioni sia del primo che del secondo elemento diventeranno uguali:

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

Vedi anche

proprietà outline,
che crea un bordo che non espande l'elemento