Cos'è il modello a scatola in CSS?

In CSS, il modello di box descrive un'area rettangolare generata per ogni elemento e usata per calcolarne le dimensioni e la posizione. È composta da quattro parti:

• Box di contenuto: L'area in cui viene visualizzato il contenuto dell'elemento (testo, immagini, ecc.). La sua dimensione è determinata dalle proprietà width e height.
• Box di padding: Lo spazio tra il bordo del contenuto e il bordo dell'elemento. La sua dimensione è determinata dalla proprietà padding. Il colore di sfondo e l'immagine dell'elemento si estendono in questa area.
• Box di bordo: Il bordo dell'elemento che circonda il box di padding. La sua dimensione è determinata dalle proprietà border.
• Box di margine: Lo spazio intorno al bordo dell'elemento, che lo separa dagli altri elementi. La sua dimensione è determinata dalla proprietà margin. Quest'area è sempre completamente trasparente.

La dimensione dell'elemento di default viene calcolata come segue:

larghezza = width + padding-left + padding-right + border-left-width + border-right-width
altezza = height + padding-top + padding-bottom + border-top-width + border-bottom-width

La proprietà box-sizing permette di modificare questo modello:

• content-box (predefinito): Le dimensioni width e height si riferiscono solo alla box di contenuto.
• border-box: Le dimensioni width e height includono padding e border.

.element-default {
  width: 100px; /* Larghezza della box di contenuto = 100px */
  padding: 10px;
  border: 5px solid black;
  /* Larghezza reale dell'elemento: 100 + 10 + 10 + 5 + 5 = 130px */
}

.element-border-box {
  width: 100px; /* Larghezza reale dell'elemento = 100px */
  padding: 10px;
  border: 5px solid black;
  box-sizing: border-box;
  /* Larghezza della box di contenuto: 100 - 10 - 10 - 5 - 5 = 70px */
}