Come influisce la proprietà box-sizing sulla dimensione dell'elemento?

La proprietà CSS box-sizing determina come vengono calcolate le dimensioni di un elemento — includendo o meno i margini interni (padding) e i bordi (border).

• Valore content-box (predefinito): la larghezza e l’altezza dell’elemento definiscono solo il contenuto. I margini interni e i bordi vengono aggiunti a queste dimensioni, aumentando la dimensione totale dell’elemento.

• Valore border-box: larghezza e altezza includono il contenuto, i margini interni e i bordi. Ciò significa che se si imposta una larghezza di 100px, il contenuto verrà ridotto considerando padding e border affinché la dimensione totale rimanga 100px.

Esempio:

.box {
  width: 200px;
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
}

In questo caso, l’elemento .box avrà una larghezza totale di 200px, inclusi padding e border. Se fosse content-box, la larghezza totale sarebbe 200 + 210 + 25 = 230px.

L’uso di border-box semplifica spesso il layout, poiché le dimensioni degli elementi non "si scompongono" a causa di padding e border.