Cos'è la proprietà box-sizing: border-box e quale ruolo svolge in CSS?

La proprietà box-sizing determina come viene calcolata la larghezza e l'altezza totali di un elemento.

box-sizing: content-box (valore predefinito) — la larghezza e l'altezza si riferiscono solo al contenuto (content). Padding e border vengono aggiunti ai valori specificati di larghezza/altezza.

box-sizing: border-box — la larghezza e l'altezza includono padding e border. Il content viene compresso per adattarsi alle dimensioni specificate.

Il ruolo di box-sizing: border-box in CSS:

• Semplificazione dei calcoli: Facilita il calcolo delle dimensioni degli elementi, specialmente quando si usano padding e border.
• Prevedibilità nel layout: Permette di impostare con precisione le dimensioni dei blocchi, indipendentemente da padding e border, rendendo il layout più prevedibile.
• Comodità nel modello di box: Si allinea alla comprensione intuitiva della dimensione del blocco — i suoi bordi. Facilita la creazione di griglie e componenti di dimensioni fisse.

Esempio:

.element-content-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: content-box; /* Larghezza totale = 100 + 10*2 + 1*2 = 122px */
  /* Altezza totale = 100 + 10*2 + 1*2 = 122px */
}

.element-border-box {
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid black;
  box-sizing: border-box; /* Larghezza totale = 100px */
  /* Altezza totale = 100px */
  /* Il contenuto occuperà 100 - 10*2 - 1*2 = 78px in larghezza e altezza */
}