InnoMarts logo
InnoMarts
Fast websites
← Back to course

Il Box Model

Il Box Model

Bentornato.

Nella lezione precedente hai imparato a stilizzare il testo con colori, font, dimensioni e spaziatura.

Ora incontriamo una delle idee più importanti di CSS:

Il box model.

Ogni elemento in una pagina web viene trattato come una scatola.

Titoli?

Scatola.

Paragrafi?

Scatola.

Immagini?

Scatola.

Pulsanti?

Scatola.

Quel piccolo div innocente?

Decisamente una scatola.

CSS guarda la tua pagina e vede scatole ovunque.

Come un magazziniere con opinioni di design.

Cosa Imparerai

In questa lezione imparerai:

Cos’è il Box Model?

Il CSS box model descrive come funziona lo spazio attorno a ogni elemento.

Ogni box ha quattro parti principali:

Puoi immaginarlo così:

margin
  border
    padding
      content

Il content è il testo, l’immagine o il contenuto reale dell’elemento.

Padding è lo spazio dentro l’elemento.

Border è la linea attorno all’elemento.

Margin è lo spazio fuori dall’elemento.

Idea semplice.

Impatto enorme.

Come scoprire che i problemi di layout non erano magia.

Erano scatole.

Scatole fin dall’inizio.

Crea il Progetto

Crea una cartella per questa lezione:

mkdir css-lesson4
cd css-lesson4
touch index.html
touch style.css

Dovresti avere:

css-lesson4/
  index.html
  style.css

Apri la cartella nel tuo editor.

Costruiremo una piccola pagina con card.

Le card sono perfette per imparare il box model.

Perché usano padding, margin, border, width e a volte supporto emotivo.

Scrivi l’HTML

Apri index.html e aggiungi questo:

<!DOCTYPE html>
<html lang="it">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Il CSS Box Model</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <h1>Il CSS Box Model</h1>
    <p>Ogni elemento è una scatola. Sì, anche quello.</p>
  </header>

  <main class="page">
    <section class="intro-card">
      <h2>Cos’è il Box Model?</h2>
      <p>
        Il box model spiega come CSS calcola dimensioni e spaziatura degli elementi.
      </p>
    </section>

    <section class="cards">
      <article class="card">
        <h2>Content</h2>
        <p>Il testo, l’immagine o il contenuto reale dentro l’elemento.</p>
      </article>

      <article class="card">
        <h2>Padding</h2>
        <p>Lo spazio tra il contenuto e il bordo.</p>
      </article>

      <article class="card">
        <h2>Border</h2>
        <p>La linea attorno al padding e al content.</p>
      </article>

      <article class="card">
        <h2>Margin</h2>
        <p>Lo spazio fuori dall’elemento.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Creato mentre imparo il CSS box model.</p>
  </footer>
</body>
</html>

Questo ci dà:

Ora possiamo stilizzare le scatole.

E sì, finalmente capiremo perché un solo margin può rovinarti la mattina.

Inizia con gli Stili Base

Apri style.css e aggiungi:

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

.page {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

Questo crea un layout base della pagina.

Nota:

margin: 40px auto;

Questo centra il container .page orizzontalmente.

40px aggiunge spazio verticale.

auto gestisce lo spazio a sinistra e a destra.

CSS dice:

“Lascia calcolare i lati a me.”

E per una volta, CSS è utile.

Content

Il content è la parte interna dell’elemento.

Per esempio:

<article class="card">
  <h2>Content</h2>
  <p>Il testo, l’immagine o il contenuto reale dentro l’elemento.</p>
</article>

Il testo dentro la card è il content.

In CSS, width e height di solito descrivono la dimensione dell’area content.

Esempio:

.card {
  width: 300px;
}

Questo significa che l’area content è larga 300px.

Ma c’è un piccolo problema.

Padding e border possono aumentare la dimensione visibile finale.

Perché CSS ama le sorprese.

Non sempre belle sorprese.

Padding

Padding è lo spazio dentro l’elemento.

Crea respiro tra il contenuto e il border.

Aggiungi questo:

.card {
  background-color: white;
  padding: 24px;
}

Ora il contenuto non tocca i bordi.

Molto meglio.

Senza padding, il testo sta troppo vicino al bordo.

Come qualcuno che si avvicina troppo mentre spiega le closure di JavaScript.

Padding rende tutto più comodo.

Puoi impostare padding su tutti i lati:

padding: 24px;

Oppure separatamente:

padding-top: 20px;
padding-right: 24px;
padding-bottom: 20px;
padding-left: 24px;

Puoi anche usare shorthand:

padding: 20px 24px;

Questo significa:

Molto utile.

Molto comune.

Border

Border è la linea attorno all’elemento.

Aggiungi questo:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
}

Il border ha tre parti:

border: width style color;

Esempio:

border: 2px solid #e5e7eb;

Questo significa:

Puoi creare stili diversi di border:

border: 2px solid #2563eb;
border: 2px dashed #f97316;
border: 2px dotted #16a34a;

I border sono utili per separare contenuti.

Ma non mettere border ovunque.

Troppi border fanno sembrare una pagina come un foglio Excel dopo un esaurimento nervoso.

Border Radius

La proprietà border-radius arrotonda gli angoli.

Aggiungi:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
}

Ora le card sembrano più morbide.

Meno taglienti.

Meno come un documento ufficiale del 2004.

Puoi usare valori piccoli o grandi:

border-radius: 8px;
border-radius: 16px;
border-radius: 999px;

999px viene spesso usato per pulsanti a pillola.

Il pulsante diventa rotondo e amichevole.

Come se volesse essere cliccato educatamente.

Margin

Margin è lo spazio fuori dall’elemento.

Aggiungi questo:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
  margin-bottom: 20px;
}

Ora c’è spazio tra le card.

Margin separa gli elementi tra loro.

Padding crea comfort interno.

Margin crea distanza esterna.

Differenza importante.

Padding dice:

“Dai spazio al mio contenuto dentro di me.”

Margin dice:

“Dammi spazio dagli altri.”

Entrambi sono necessari.

Molto umano, in realtà.

Width e Height

Puoi controllare la dimensione degli elementi con width e height.

Esempio:

.card {
  width: 300px;
}

Ma fai attenzione alle larghezze fisse.

Le larghezze fisse possono creare problemi su schermi piccoli.

Meglio spesso usare:

.card {
  max-width: 300px;
}

Oppure per i container:

.page {
  max-width: 900px;
}

max-width significa:

Non diventare più largo di questo, ma puoi essere più piccolo se necessario.

È utile per il responsive design.

Il browser ha spazio per respirare.

E il layout non esplode sui telefoni.

Sempre una buona cosa.

Il Problema di Box-Sizing

Di default, CSS usa:

box-sizing: content-box;

Questo significa:

Esempio:

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}

La larghezza visibile finale diventa:

300px content
+ 40px padding
+ 4px border
= 344px total width

Questo sorprende molti principianti.

E anche alcuni sviluppatori esperti.

E probabilmente una persona in una cantina che sta ancora debuggando un layout del 2016.

Usa border-box

La maggior parte dei progetti CSS moderni usa questo:

* {
  box-sizing: border-box;
}

Aggiungilo all’inizio del CSS:

* {
  box-sizing: border-box;
}

Ora width include:

Questo rende le dimensioni più semplici.

Se scrivi:

.card {
  width: 300px;
  padding: 20px;
  border: 2px solid black;
}

La larghezza visibile finale resta 300px.

Molto più prevedibile.

CSS diventa leggermente meno caotico.

Apprezziamo questo raro momento.

Stilizza il Layout delle Card

Aggiungi questo:

.cards {
  display: grid;
  gap: 20px;
}

Non preoccuparti troppo di Grid adesso.

Lo studieremo più avanti.

Per ora sappi solo questo:

gap: 20px;

crea spazio tra le card.

Spesso è più pulito che usare tanti margin.

Ora aggiorna lo stile della card:

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
}

Dato che .cards usa gap, non ci serve margin-bottom su ogni card.

Più pulito.

Più organizzato.

Meno spaghetti CSS.

Stilizza la Intro Card

Aggiungi:

.intro-card {
  background-color: #eff6ff;
  padding: 32px;
  border-left: 6px solid #2563eb;
  border-radius: 16px;
  margin-bottom: 24px;
}

Questa intro card usa:

Questo è il box model in azione.

Non teoria.

Layout reale.

La scatola è entrata nell’edificio.

CSS Completo

Il tuo style.css dovrebbe essere così:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

.site-header {
  background-color: #111827;
  color: white;
  text-align: center;
  padding: 48px 24px;
}

.page {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.intro-card {
  background-color: #eff6ff;
  padding: 32px;
  border-left: 6px solid #2563eb;
  border-radius: 16px;
  margin-bottom: 24px;
}

.cards {
  display: grid;
  gap: 20px;
}

.card {
  background-color: white;
  padding: 24px;
  border: 2px solid #e5e7eb;
  border-radius: 16px;
}

.card h2 {
  margin-top: 0;
}

.card p,
.intro-card p {
  color: #374151;
  font-size: 18px;
  line-height: 1.7;
}

.site-footer {
  text-align: center;
  padding: 24px;
  color: #6b7280;
}

Salva il file.

Aggiorna il browser.

Ora dovresti vedere spaziatura pulita e struttura delle card.

Questo è il box model che lavora.

In silenzio.

Dietro le quinte.

Come una squadra tecnica vestita da proprietà CSS.

Errori Comuni

Confondere margin e padding

Padding è dentro.

Margin è fuori.

Esempio:

.card {
  padding: 24px;
  margin-bottom: 20px;
}

padding dà spazio dentro la card.

margin-bottom dà spazio dopo la card.

Se il testo è troppo vicino al bordo della card, usa padding.

Se le card sono troppo vicine tra loro, usa margin o gap.

Semplice.

Ma facile da confondere.

CSS ama testare la concentrazione.

Dimenticare box-sizing

Senza questo:

* {
  box-sizing: border-box;
}

Le larghezze possono diventare sorprendenti.

Usa border-box nella maggior parte dei progetti.

Rende i layout più facili da capire.

Il tuo futuro te ti ringrazierà.

Forse anche con un caffè.

Aggiungere troppo margin ovunque

Male:

h1 {
  margin: 50px;
}

p {
  margin: 50px;
}

.card {
  margin: 50px;
}

Troppo margin ovunque crea caos.

Usa la spaziatura con intenzione.

Non come lanciare cuscini in una stanza a occhi chiusi.

Pratica

Crea una pagina con:

Stilizza ogni card con:

Usa:

box-sizing: border-box;

all’inizio del CSS.

Poi sperimenta con:

Osserva come cambia il layout.

CSS diventa meno spaventoso quando guardi cosa fa ogni proprietà.

Mini Sfida

Crea tre pricing cards:

Ogni card dovrebbe avere:

Usa il box model per stilizzarle:

Fai risaltare la card Premium con un colore diverso del border.

Non troppo.

Solo abbastanza per dire:

“Sono speciale.”

Non:

“Sono scappata da un poster del carnevale.”

Riassunto

Oggi hai imparato che:

Il box model è ovunque.

Se lo capisci, CSS diventa molto più facile.

Se lo ignori, i tuoi layout si comporteranno come mobili ribelli.

E abbiamo già abbastanza mobili ribelli nella vita.

Prossima Lezione

Nella prossima lezione impareremo Flexbox.

Flexbox aiuta ad allineare e organizzare elementi in una direzione.

Righe.

Colonne.

Cose centrate.

Finalmente CSS ci aiuterà a posizionare elementi senza evocare spiriti antichi.