Corso di CSS / Modello a scatola CSS: contenuto, padding, bordo e margine

Il modello a scatola CSS descrive l'area del contenuto di un elemento, il padding, il bordo e il margine esterno. Queste aree influenzano le sue dimensioni visibili e gli spazi, mentre i margini verticali dei blocchi adiacenti possono collassare in determinate condizioni.

Identifica le quattro aree del box

L'immagine qui sotto mostra le posizioni delle quattro aree. Testo o immagini sono collocati all'interno del contenuto blu, e un padding giallo e un bordo verde circondano l'esterno. Il margine arancione si trova al di fuori del bordo. Il colore dell'immagine serve a distinguere l'area, e il colore di sfondo dell'elemento non viene applicato al margine stesso.

Il colore di sfondo predefinito è visibile nelle aree di contenuto e padding e può anche essere disegnato dietro i bordi. Lo sfondo dell'elemento non viene disegnato nell'area del margine. Pertanto, per espandere l'area colorata della scheda, è necessario aumentare il padding, non il margine. L’area coperta dallo sfondo può essere modificata con una proprietà separata, ma qui viene utilizzato il comportamento predefinito.

Calcolare le larghezze dichiarate ed esterne

.card {
  width: 200px;
  padding: 20px;
  border: 2px solid #2f6e9b;
  margin: 16px;
  background-color: #eaf4fa;
}

Per un elemento content-box normale, width: 200px misura il contenuto. Aggiungere 20px di padding e 2px di bordo su entrambi i lati produce un border-box di 244px. I margini di 16px si trovano al di fuori, rendendo lo spazio orizzontale, inclusi entrambi i margini, di 276px. I margini verticali possono collassare, quindi non applicare questa semplice somma a tutti i casi verticali. Per ulteriori dettagli, vedere Dimensioni CSS, limiti min/max e box-sizing.

Utilizzare box-sizing: border-box per includere padding e bordo nella larghezza dichiarata. Cambiare solo quella proprietà in questo esempio produce un border-box di 200px e un'area contenuto di 156px. Il confronto successivo delle dimensioni misura le stesse card sotto entrambe le regole di box-sizing. Vedere MDN: introduzione al modello a scatola.

Leggere le abbreviazioni con uno, due, tre o quattro valori

Anche i valori dei margini sono specificati nello stesso ordine. Con due valori, il primo indica sopra e sotto e il secondo sinistra e destra; con tre valori, l’ordine è sopra, sinistra/destra, sotto; con quattro, si procede in senso orario dall’alto. Se vuoi cambiare solo alcune direzioni, usa proprietà individuali come padding-top. Se in seguito riscrivi le proprietà abbreviate, anche i valori individuali specificati in precedenza possono cambiare, quindi controlla l'ordine di applicazione.

padding-inline e margin-block sono proprietà logiche basate sulla direzione di scrittura del testo. In generale, nella scrittura orizzontale da sinistra a destra, inline corrisponde a sinistra e destra, e block corrisponde a sopra e sotto, ma nella scrittura verticale, la direzione fisica è diversa. Questo non significa sempre una direzione orizzontale o verticale fissa. Puoi controllare la corrispondenza delle direzioni nella descrizione del margin-block di MDN.

Comprendere il collasso dei margini verticali

I margini verticali adiacenti in un normale flusso a blocchi vengono fusi condizionalmente in un unico spazio. Questo è chiamato collasso dei margini. I margini positivi in cui il margine inferiore dell'elemento precedente è di 20px e il margine superiore dell'elemento successivo è di 30px possono apparire come un unico spazio di 30px, pari al maggiore dei due margini, anziché 50px.

Il collasso dei margini non combina i margini orizzontali o il padding, e i margini degli elementi Flexbox e Grid non collassano come i margini dei blocchi in flusso normale. I margini genitore–figlio e i margini negativi introducono altre condizioni. Questo esercizio confronta deliberatamente solo i margini verticali positivi tra due blocchi fratelli. Vedi MDN: Margin collapsing.

Esegui l'esempio e misura ciascuna area

Salva il codice qui sotto come box-model.html in UTF-8 e aprilo. La prima scheda controlla le quattro aree, e le due righe all'interno del riquadro tratteggiato servono per osservare il collasso dei margini verticali. L'ultimo riquadro mostra il padding per tre valori.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Box model and spacing exercise</title>
  <style>
    body { margin: 16px; font: 16px/1.6 sans-serif; color: #333; }
    .card { width: 200px; padding: 20px; border: 2px solid #2f6e9b;
      margin: 16px; background-color: #eaf4fa; }
    .collapse-demo { max-width: 300px; padding: 8px; border: 1px dashed #777; }
    .row { padding: 8px; background: #e9f7ef; }
    .first { margin-bottom: 20px; }
    .second { margin-top: 30px; }
    .three-values { max-width: 250px; padding: 10px 20px 30px;
      border: 1px solid #b98022; background: #fff4d9; }
  </style>
</head>
<body>
  <h1>The four box areas</h1>
  <div class="card">The content width is 200px; the width including the border is 244px.</div>
  <h2>Vertical margin collapsing</h2>
  <div class="collapse-demo">
    <div class="row first">Bottom margin: 20px</div>
    <div class="row second">Top margin: 30px</div>
  </div>
  <h2>Padding with three values</h2>
  <div class="three-values">Top: 10px; left and right: 20px; bottom: 30px</div>
</body>
</html>

1. Nei Developer Tools, sotto Elements, seleziona la .card e cerca la visualizzazione del box model in Styles o Computed. Assicurati che il contenuto sia 200px, il padding a sinistra e a destra sia di 20px, il bordo sia 2px e il margine sia 16px.
2. Modifica solo il padding a 30px. Il contenuto rimarrà 200px e la larghezza fino al bordo sarà di 264px. Se lo riporti ai 20px originali e cambi il margine a 32px, la larghezza della scheda stessa rimarrà 244px e lo spazio circostante cambierà.
3. Guarda tra le due righe all'interno della casella tratteggiata. I margini verticali positivi di 20px e 30px si combinano, risultando in uno spazio di 30px. Se cambi il margine inferiore della prima riga a 40px, lo spazio diventa 40px. Dopo aver confrontato, torna a 20px.
4. Controlla che il padding inferiore di .three-values sia 30px, quello superiore sia 10px, e quello sinistro e destro sia 20px. Se elimini gli ultimi 30px per farlo diventare due valori, anche il fondo diventa 10px.

La spaziatura che differisce da quella prevista può verificarsi a causa del margine predefinito p·h1 del browser, di selettori con specificità maggiore o della fusione dei margini. Per prima cosa, controlla quale margine è per quale elemento e cambialo un valore alla volta. Le modifiche temporanee negli strumenti per sviluppatori scompaiono quando aggiorni, e le modifiche salvate nei file devono essere ripristinate manualmente ai loro valori originali.