I quattro strati: content area, padding, border, margin

Nel CSS, tutto è una scatola (box). Quando vedi un pulsante rotondo, in realtà è una scatola rettangolare a cui è stato detto di arrotondare gli angoli. Quando vedi un testo, è racchiuso in una scatola invisibile.

Comprendere come funzionano queste scatole è il primo passo per padroneggiare i layout web. Questo sistema è chiamato Box Model (Modello a Scatola) ed è composto da quattro strati che si sviluppano dall’interno verso l’esterno.

I 4 Strati del Box Model

Immagina un quadro appeso al muro:

1. Il dipinto stesso.
2. Lo spazio bianco del passe-partout attorno al dipinto.
3. La cornice di legno.
4. Lo spazio di muro vuoto prima del quadro successivo.

Nel CSS, questi 4 livelli hanno nomi ben precisi.

1. Content (Il Contenuto)

È il nucleo centrale della scatola, dove risiede il testo, l’immagine o il video. Le sue dimensioni sono determinate dalle proprietà width (larghezza) e height (altezza). Metafora del quadro: Il dipinto stesso.

2. Padding (Spaziatura Interna)

È lo spazio vuoto e trasparente che circonda immediatamente il contenuto, spingendo verso l’esterno i bordi. Se l’elemento ha un colore di sfondo (background-color), questo colore riempirà anche l’area del padding. Metafora del quadro: Il passe-partout di cartoncino bianco.

.box {
  padding: 20px; /* 20px di spazio su tutti e 4 i lati */
}

3. Border (Il Bordo)

È una linea (visibile o invisibile) che circonda l’elemento, situandosi esattamente tra il padding e il margine. Metafora del quadro: La cornice di legno.

.box {
  border: 2px solid black; /* Bordo nero spesso 2px */
}

4. Margin (Margine o Spaziatura Esterna)

È lo spazio invisibile all’esterno del bordo. Serve ad allontanare la tua scatola dalle altre scatole vicine. A differenza del padding, il margine è sempre trasparente e non prende mai il colore di sfondo dell’elemento. Metafora del quadro: la porzione di muro vuota tra un quadro e l’altro.

.box {
  margin: 30px; /* Spinge via gli altri elementi di 30px */
}

Sintassi abbreviata (Shorthand)

Per padding e margin, puoi definire lati specifici: margin-top, margin-right, margin-bottom, margin-left. Ma quasi sempre userai la scorciatoia (shorthand), che si legge in senso orario partendo dall’alto:

.box {
  /* Alto Destra Basso Sinistra (Orologio) */
  margin: 10px 20px 30px 40px; 
  
  /* Alto/Basso Destra/Sinistra */
  padding: 10px 20px; 
  
  /* Tutti uguali */
  padding: 15px; 
}

Nella prossima lezione vedremo un comportamento del box model originale che rende i calcoli meno intuitivi e come renderli più prevedibili con box-sizing.