Box Model CSS

In CSS, il termine “modello a scatola” (box model) è utilizzato quando si parla di design e layout.

Il modello a scatola CSS è essenzialmente una scatola che avvolge ogni elemento HTML. È composto da: margini, bordi, padding e il contenuto effettivo.

• Contenuto - Il contenuto della scatola, dove appare il testo e le immagini.
• Padding - Crea uno spazio intorno al contenuto. Il padding è trasparente.
• Bordo - Un bordo che circonda il padding e il contenuto.
• Margine - Crea uno spazio all’esterno del bordo. Il margine è trasparente. Il modello a scatola ci permette di aggiungere un bordo intorno agli elementi e di definire lo spazio tra gli elementi.

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Larghezza e Altezza di un Elemento

Per impostare correttamente la larghezza e l’altezza di un elemento in tutti i browser, è necessario capire come funziona il modello a scatola.

Quando si impostano le proprietà di larghezza e altezza di un elemento con CSS, si sta in realtà impostando la larghezza e l’altezza dell’area del contenuto. Per calcolare le dimensioni complete di un elemento, è necessario aggiungere anche padding, bordi e margini.

Questo elemento <div> avrà una larghezza totale di 350px:

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0;
}

Ecco il calcolo:

• 320px (larghezza)
• 20px (padding sx/dx)
• 10px (bordo sx/dx)
• 0px (margine sx/dx)
• 350px (totale)