Guida CSS interattiva: Box model

Q: Cosa fa box-sizing: border-box?

Fa sì che width e height includano padding e bordo. Un box con width: 200px, padding: 20px e un bordo di 5px è allora largo esattamente 200px, e l'area del contenuto si riduce a 150px per starci dentro. Il valore predefinito, content-box, aggiunge padding e bordo in più, per un totale di 250px.

Q: Come si calcola la larghezza totale di un elemento?

Con il content-box predefinito: width + padding sinistro e destro + bordo sinistro e destro. Con border-box: solo width. Il margin sta fuori dal box in entrambi i casi, quindi si somma allo spazio che l'elemento occupa, non alla sua larghezza.

Q: Conviene impostare box-sizing: border-box su tutto?

La maggior parte dei progetti lo fa, con , ::before, *::after { box-sizing: border-box; } all'inizio del foglio di stile. Fa tornare i conti di larghezze in percentuale e padding come ci si aspetta, e framework come Bootstrap e Tailwind includono lo stesso reset.

I quattro strati di ogni box

Ogni elemento di una pagina viene disegnato come un rettangolo fatto di quattro strati, dall'interno verso l'esterno:

Content: il testo, l'immagine o gli elementi figli, dimensionato da width e height.
Padding: spazio dentro il box, tra il contenuto e il bordo. Mostra lo sfondo dell'elemento.
Border: la linea attorno al padding.
Margin: spazio fuori dal bordo che allontana gli altri box. Sempre trasparente.

Nell'esempio ogni strato ha un colore diverso: contenuto blu, padding verde, un bordo scuro e un'area ambra attorno al box che è il margin (disegnata da un contenitore, perché il margin in sé è trasparente).

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Box model</title>
  <style>
    .margin-area {
      display: flow-root; /* keeps the margin inside the amber wrapper */
      background: #f59e0b;
      width: max-content;
    }
    .box {
      width: 160px;
      height: 60px;
      padding: 20px;
      border: 10px solid #111827;
      margin: 24px;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
    }
  </style>
</head>
<body>
  <div class="margin-area">
    <div class="box">content</div>
  </div>
  <p id="out"></p>
  <script>
    const box = document.querySelector('.box');
    const s = getComputedStyle(box);
    document.getElementById('out').textContent =
      'content ' + s.width + ' + padding ' + s.paddingLeft + ' x 2 + border ' +
      s.borderLeftWidth + ' x 2 = ' + box.getBoundingClientRect().width + 'px wide';
  </script>
</body>
</html>

La riga sotto il box viene misurata dal browser: 160 + 20 + 20 + 10 + 10 = 220px. Il margin aggiunge altri 24px per lato, ma sta fuori dal box, quindi non fa parte dei 220.

Calcolo della larghezza: content-box o border-box

Per impostazione predefinita (box-sizing: content-box), width imposta solo il contenuto. Padding e bordo si aggiungono sopra, quindi il box finisce per essere più largo del numero che hai scritto. Con box-sizing: border-box, width è l'intero box, e il contenuto si restringe per fare spazio a padding e bordo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>box-sizing</title>
  <style>
    .box {
      width: 200px;
      padding: 20px;
      border: 5px solid #111827;
      background: #e5e7eb;
      margin-bottom: 12px;
    }
    .content { box-sizing: content-box; }
    .border { box-sizing: border-box; background: #bfdbfe; }
  </style>
</head>
<body>
  <div class="box content">content-box</div>
  <div class="box border">border-box</div>
  <script>
    document.querySelectorAll('.box').forEach((el) => {
      el.textContent += ': ' + el.getBoundingClientRect().width + 'px wide';
    });
  </script>
</body>
</html>

	`content-box` (predefinito)	`border-box`
`width` indica	Il contenuto	Contenuto + padding + bordo
`width: 200px; padding: 20px; border: 5px`	Largo 250px	Largo 200px
Area del contenuto in quel caso	200px	150px
Margin	Fuori, non contato	Fuori, non contato

Il reset border-box

Siccome border-box fa tornare i conti delle dimensioni, quasi ogni foglio di stile moderno inizia con questa regola:

*,
*::before,
*::after {
  box-sizing: border-box;
}

Conta soprattutto con le percentuali. Due colonne con width: 50% e del padding non stanno su una riga con content-box, perché ognuna è il 50% più il suo padding:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Columns</title>
  <style>
    .row { width: 400px; background: #e5e7eb; margin-bottom: 12px; }
    .col {
      display: inline-block;
      width: 50%;
      padding: 10px;
      border: 2px solid #2563eb;
      vertical-align: top;
    }
    .fixed .col { box-sizing: border-box; }
  </style>
</head>
<body>
  <div class="row"><!--
 --><div class="col">content-box</div><!--
 --><div class="col">wraps to a new line</div><!--
--></div>
  <div class="row fixed"><!--
 --><div class="col">border-box</div><!--
 --><div class="col">fits side by side</div><!--
--></div>
</body>
</html>

(I commenti HTML eliminano lo spazio tra le colonne inline-block, che altrimenti aggiungerebbe qualche pixel.)

Vedere il box model nei DevTools

Ogni browser disegna il box model per te. Fai clic destro su un elemento, scegli Ispeziona e apri la scheda Computed (Layout in Firefox): uno schema mostra la dimensione del contenuto al centro, circondata dai valori di padding, bordo e margin. Passando il mouse su un elemento nel pannello Elements, anche la pagina si colora: contenuto blu, padding verde, margin arancione.

I box inline seguono regole diverse

Il box model descritto sopra riguarda i box di blocco come <div> e <p>. Gli elementi inline come <span>, <a> e <strong> vanno a capo dentro una riga di testo, e trattano lo spazio verticale in modo diverso:

Proprietà	Su un elemento inline
`width`, `height`	Ignorate
Padding, bordo e margin orizzontali	Applicati, e spostano di lato gli elementi vicini
Padding e bordo verticali	Disegnati, ma non spostano le righe sopra e sotto
Margin verticale	Ignorato

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Inline box</title>
  <style>
    p { width: 320px; line-height: 1.5; }
    span {
      background: #bfdbfe;
      padding: 12px 6px;
      margin: 30px 0;
      border: 2px solid #2563eb;
    }
    .ib { display: inline-block; }
  </style>
</head>
<body>
  <p>Text before an <span>inline span</span> whose vertical padding overlaps the lines around it.</p>
  <p>Text before an <span class="ib">inline-block</span> that makes room for its padding and margin.</p>
</body>
</html>

display: inline-block dà a un elemento dentro una riga il box model completo: larghezza, altezza, padding e margin occupano tutti spazio. Vedi padding CSS e margin CSS per ogni strato nel dettaglio.

Errori comuni

Aggiungere padding a un box a larghezza fissa e chiedersi perché è cresciuto. Con content-box, padding e bordo si sommano a width. Usa border-box.
Aspettarsi che il margin prenda il colore di sfondo. Il margin è sempre trasparente; usa il padding per uno spazio colorato.
Impostare height o un margin verticale su un elemento inline. Non succede nulla; usa display: inline-block o block.
Dimenticare i bordi nei calcoli. Un bordo di 1px su un elemento con width: 100% lo rende largo 2px di troppo con content-box, e può comparire una barra di scorrimento orizzontale.
Confondere margin e padding. In breve: il padding sta dentro il bordo, il margin fuori. La pagina margin o padding li mette a confronto.

Domande frequenti

Cos'è il box model CSS?

La regola per cui ogni elemento viene disegnato come un box rettangolare di quattro strati: il contenuto, il padding attorno a esso, il bordo attorno al padding e il margin fuori dal bordo. Larghezza, altezza e spaziature in CSS si impostano tutte su questi strati.

Cosa fa box-sizing: border-box?

Fa sì che width e height includano padding e bordo. Un box con width: 200px, padding: 20px e un bordo di 5px è allora largo esattamente 200px, e l'area del contenuto si riduce a 150px per starci dentro. Il valore predefinito, content-box, aggiunge padding e bordo in più, per un totale di 250px.

Come si calcola la larghezza totale di un elemento?

Con il content-box predefinito: width + padding sinistro e destro + bordo sinistro e destro. Con border-box: solo width. Il margin sta fuori dal box in entrambi i casi, quindi si somma allo spazio che l'elemento occupa, non alla sua larghezza.

Il margin fa parte del box model?

Sì, è lo strato più esterno, ma è sempre trasparente e non viene mai contato nella larghezza o nello sfondo dell'elemento. Serve solo ad allontanare i box vicini.

Conviene impostare box-sizing: border-box su tutto?

La maggior parte dei progetti lo fa, con *, *::before, *::after { box-sizing: border-box; } all'inizio del foglio di stile. Fa tornare i conti di larghezze in percentuale e padding come ci si aspetta, e framework come Bootstrap e Tailwind includono lo stesso reset.

Concetti correlati