Scatole e spazi · Code con Martin

Scopri il segreto più grande del CSS: tutto su una pagina è una scatola. E impara a spostarle.

Te lo mostro: tutto è una scatola

Ecco il segreto più grande del web design: ogni singola cosa su una pagina è una scatola rettangolare. Un titolo, un paragrafo, un’immagine, un menu – tutto. Quando impari a vederlo, tutto il CSS ha senso.

Ogni scatola ha tre tipi di spazio intorno:

        margin (outer space)
      ┌─────────────────────────┐
      │  border (frame)         │
      │  ┌───────────────────┐  │
      │  │ padding (cushion) │  │
      │  │  ┌─────────────┐  │  │
      │  │  │   CONTENT   │  │  │
      │  │  └─────────────┘  │  │
      │  └───────────────────┘  │
      └─────────────────────────┘

padding – il cuscino: spazio tra il contenuto e il bordo (dentro la scatola)
border – la cornice della scatola
margin – spazio tra la scatola e i vicini (fuori dalla scatola)

.card {
  padding: 16px;        /* cushion on all sides */
  border: 2px solid gray;
  margin: 20px 0;       /* 20px top and bottom, 0 on the sides */
  border-radius: 12px;
}

Te lo mostro: una pagina come la costruiscono i professionisti

L’hai visto sui siti veri – il contenuto non si allarga su tutto lo schermo largo, resta in una colonna comoda al centro. Tre righe di CSS fanno questo:

main {
  max-width: 700px;   /* content will never be wider than 700px */
  margin: 0 auto;     /* auto on the sides = center it */
  padding: 0 16px;     /* on mobile, text won't be glued to the edge */
}

margin: 0 auto è una formula magica: zero sopra e sotto, “automaticamente uguale” ai lati – cioè centrato. Quasi ogni sito web al mondo usa questa regola.

E domiamo anche le immagini, così non fuoriescono mai dalla pagina:

img {
  max-width: 100%;      /* never wider than the column */
  height: auto;         /* height adjusts automatically, so the photo doesn't squish */
  border-radius: 12px;  /* rounded corners suit every photo */
}

Ora tocca a te 💪

Questo compito è uguale per ogni progetto – è un abito universale per qualsiasi sito web:

Centra il contenuto: la regola max-width + margin: 0 auto su main.
Domia le immagini con la regola img dall’esempio.
Migliora il tuo badge dalla lezione scorsa: aggiungi margin così ha un po’ di respiro.
Fai respirare la pagina: aggiungi body { line-height: 1.6; } – le righe di testo si distanziano bene.

Soluzione completa (funziona per ogni progetto)

Aggiungi questo a style.css:

body {
  line-height: 1.6;
}

main {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 16px;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}

E al tuo badge (il tuo potrebbe chiamarsi .news, .favorite, .tip o .win), aggiungi questa riga:

  margin: 20px 0;

💡

Prova a rendere visibili le scatole! Aggiungi per un momento questa regola al CSS: * { border: 1px solid red; } – l’asterisco significa “assolutamente tutto”. All’improvviso vedrai ogni scatola sulla pagina. Poi cancellala, ma ricorda quella vista: è così che il browser vede la tua pagina.

✅

Controlla da solo: Il contenuto sta in una colonna comoda e centrata, le foto hanno angoli arrotondati e non fuoriescono da nessuna parte, il testo si legge facilmente. Riduci la finestra del browser – il contenuto si adatta. Il tuo sito web sembra subito di una classe superiore.

Cosa porti via da questa lezione

Tutto su una pagina è una scatola con padding (dentro), border (cornice) e margin (fuori).
max-width + margin: 0 auto = una colonna di contenuto centrata, come i siti veri.
img { max-width: 100%; } – le foto non fuoriescono mai.