Comprendere il Box Model in Modo Pratico

Ogni elemento in una pagina web viene visualizzato come un riquadro rettangolare. Ogni riquadro è composto da quattro parti:

• Contenuto: il testo effettivo o gli elementi;
• Padding: spazio all'interno dell'elemento;
• Bordo: circonda il contenuto e il padding;
• Margine: spazio all'esterno dell'elemento.

Struttura visiva

Margine → Bordo → Padding → Contenuto. La dimensione totale di un elemento dipende da tutte queste parti.

Contenuto

La parte visibile dell'elemento: testo, immagini o altri elementi.

Padding (Spazio Interno)

Crea spazio tra il contenuto e il bordo.

.box {
  padding: 20px;
}

Shorthand

padding: 20px; /* all sides */
padding: 10px 20px; /* top/bottom | left/right */
padding: 10px 20px 5px; /* top | left/right | bottom */
padding: 10px 15px 20px 25px; /* top | right | bottom | left */

Margin (Spazio Esterno)

Crea spazio tra gli elementi.

.box {
  margin: 20px;
}

Shorthand

margin: 20px;
margin: 10px 20px;
margin: 10px 20px 5px;
margin: 10px 15px 20px 25px;

Bordo

Definisce il bordo dell'elemento.

.box {
  border: 4px solid darkblue;
}

Differenza principale

• Padding → spazio interno (influisce sullo sfondo);
• Margin → spazio esterno (NON influisce sullo sfondo).

Dimensionamento della Scatola

Controlla come vengono calcolate larghezza e altezza.

box-sizing: content-box; /* default */
box-sizing: border-box;

• content-box: padding + bordo aggiunti alla dimensione;
• border-box: tutto incluso nella dimensione.

Nei progetti reali, si preferisce border-box.