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

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

Valori

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:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#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:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#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:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#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:

html<div id="elem1">elem1</div>
<div id="elem2">elem2</div>

css#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