Cos'è il modello a scatola, di cosa è composto e quali sono i suoi tipi?

Il modello di box (CSS Box Model) è un'entità astratta che descrive come gli elementi HTML vengono rappresentati sulla pagina sotto forma di blocchi rettangolari. Definisce le dimensioni e la disposizione del contenuto, dei margini interni, dei bordi e dei margini esterni dell'elemento.

Il modello di box è composto dalle seguenti parti:

• Contenuto: Il contenuto dell'elemento (testo, immagini, ecc.). La sua dimensione è determinata dalle proprietà width e height.
• Padding: Lo spazio tra il contenuto dell'elemento e il suo bordo. È definito dalle proprietà padding-top, padding-right, padding-bottom, padding-left o dalla proprietà abbreviata padding.
• Bordo (Border): Il bordo intorno al padding interno e al contenuto. È definito dalle proprietà border-width, border-style, border-color o dalla proprietà abbreviata border.
• Margine (Margin): Lo spazio tra il bordo dell'elemento e gli elementi esterni. È definito dalle proprietà margin-top, margin-right, margin-bottom, margin-left o dalla proprietà abbreviata margin.

Esistono due principali tipi di modello di box, determinati dalla proprietà box-sizing:

• content-box (valore predefinito): La larghezza e l'altezza dell'elemento, impostate dalle proprietà width e height, si riferiscono solo all'area di contenuto. Padding e Border si aggiungono a queste dimensioni, aumentando la dimensione totale dell'elemento.

  div {
    width: 100px;
    height: 100px;
    padding: 10px; /* Aggiunge 20px alla dimensione totale in ogni asse */
    border: 2px solid black; /* Aggiunge 4px alla dimensione totale in ogni asse */
    box-sizing: content-box; /* Comportamento predefinito */
  }
  /* La dimensione totale dell'elemento sarà di 124px per 124px */
  

• border-box: La larghezza e l'altezza dell'elemento, impostate dalle proprietà width e height, includono il contenuto, il padding e il border. Padding e Border non aumentano la dimensione totale dell'elemento, ma la "comprimono" nell'area del contenuto.

  div {
    width: 100px;
    height: 100px;
    padding: 10px; /* Inclusa nella larghezza/altezza totale */
    border: 2px solid black; /* Inclusa nella larghezza/altezza totale */
    box-sizing: border-box;
  }
  /* La dimensione totale dell'elemento sarà di 100px per 100px */
  

Si utilizza più frequentemente border-box per un comportamento più prevedibile delle dimensioni degli elementi quando si aggiungono padding e border. Questo è utile, ad esempio, nella creazione di layout reattivi, dove gli elementi devono occupare una determinata larghezza percentuale.