Guida CSS interattiva: Margin vs Padding

Q: Padding o margin aumentano la dimensione dell'elemento?

Il padding sì, con il valore predefinito box-sizing: content-box: viene aggiunto a larghezza e altezza. Il margin non si somma mai alla dimensione dell'elemento; aggiunge spazio intorno (un blocco con width: auto diventa anzi più stretto, perché i suoi margini occupano parte della larghezza disponibile). Con box-sizing: border-box, invece, il padding viene preso dall'interno della larghezza.

La differenza in un'immagine

Il padding sta dentro il bordo. Il margin sta fuori. I due riquadri qui sotto hanno lo stesso contenuto e lo stesso valore di 24px; cambia solo la proprietà. Il grigio è il contenitore dietro di loro.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Margin vs padding</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .row { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; }
    .box {
      border: 3px solid #111827;
      background: #2563eb;
      color: white;
    }
    .with-padding { padding: 24px; }
    .with-margin { margin: 24px; }
    .label { font-size: 13px; margin: 6px 0 0; color: #111827; }
  </style>
</head>
<body>
  <div class="row">
    <div>
      <div class="container"><div class="box with-padding">Text</div></div>
      <p class="label">padding: 24px</p>
    </div>
    <div>
      <div class="container"><div class="box with-margin">Text</div></div>
      <p class="label">margin: 24px</p>
    </div>
  </div>
</body>
</html>

Con il padding, i 24px sono blu: fanno parte del riquadro, dentro il bordo, e il riquadro cresce. Con il margin, i 24px sono grigi: il riquadro resta aderente al testo e lo spazio esterno allontana i bordi del contenitore.

Provali entrambi su un riquadro

Sposta i due cursori. Il padding fa crescere il riquadro blu; il margin allontana il riquadro dai bordi grigi senza cambiarlo.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Sliders</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 6px; }
    .container { display: flow-root; background: #e5e7eb; width: max-content; margin-top: 10px; }
    #box { border: 3px solid #111827; background: #2563eb; color: white; }
  </style>
</head>
<body>
  <label>padding <input id="p" type="range" min="0" max="40" value="10"> <span id="pv"></span></label>
  <label>margin <input id="m" type="range" min="0" max="40" value="10"> <span id="mv"></span></label>
  <div class="container"><div id="box">Box</div></div>
  <p id="size"></p>
  <script>
    const box = document.getElementById('box');
    const p = document.getElementById('p');
    const m = document.getElementById('m');
    const update = () => {
      box.style.padding = p.value + 'px';
      box.style.margin = m.value + 'px';
      document.getElementById('pv').textContent = p.value + 'px';
      document.getElementById('mv').textContent = m.value + 'px';
      const r = box.getBoundingClientRect();
      document.getElementById('size').textContent =
        'Blue box: ' + Math.round(r.width) + ' x ' + Math.round(r.height) + 'px';
    };
    p.addEventListener('input', update);
    m.addEventListener('input', update);
    update();
  </script>
</body>
</html>

Osserva la riga della dimensione: cambia quando muovi il cursore del padding e resta uguale quando muovi quello del margin.

Margin e padding a colpo d'occhio

	Padding	Margin
Dove	Dentro il bordo	Fuori dal bordo
Sfondo	Mostra lo sfondo dell'elemento	Sempre trasparente
Fa parte dell'area cliccabile	Sì	No
Si somma alla dimensione dell'elemento	Sì, con `content-box`	No
Può essere `auto`	No	Sì (`margin: 0 auto` centra)
Può essere negativo	No	Sì
I valori verticali collassano	Mai	Sì, i margini verticali adiacenti collassano
Percentuali relative a	Larghezza del blocco contenitore	Larghezza del blocco contenitore
Uso tipico	Spazio dentro pulsanti, card, input	Spazio tra elementi, centratura

Ogni proprietà ha la sua pagina con tutti i dettagli: CSS padding e CSS margin.

Quale usare

Fatti una sola domanda: lo spazio appartiene all'elemento o sta tra gli elementi?

Lo spazio intorno all'etichetta di un pulsante, l'interno di una card, lo spazio tra il testo di un input e il suo bordo: padding. Prende lo sfondo e rende il bersaglio più grande.
Lo spazio tra due paragrafi, tra le card, intorno a una sezione: margin, oppure gap quando il genitore è un contenitore flex o grid.

L'area cliccabile è dove la scelta conta di più. I due link qui sotto occupano lo stesso spazio nella pagina, ma lo spazio del primo è padding e quello del secondo è margin. Solo il primo è facile da colpire:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Click area</title>
  <style>
    a {
      display: inline-block;
      background: #2563eb;
      color: white;
      text-decoration: none;
      outline: 2px dashed #f59e0b; /* the clickable area */
    }
    .pad { padding: 14px 24px; }
    .mar { margin: 14px 24px; }
  </style>
</head>
<body>
  <a class="pad" href="#">Padding: big target</a>
  <a class="mar" href="#">Margin: tiny target</a>
</body>
</html>

Il contorno tratteggiato ambra è il bordo dell'elemento, cioè l'area che risponde a clic e tocchi. Il margin intorno al secondo link è spazio vuoto che non fa niente.

Spazio tra gli elementi: margin o gap

Per una riga o una griglia di elementi, gap sul genitore flex o grid di solito è più pulito dei margini su ogni figlio: va solo tra gli elementi, mai prima del primo o dopo l'ultimo, quindi non c'è niente da annullare.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>gap</title>
  <style>
    .list { display: flex; gap: 12px; background: #e5e7eb; padding: 12px; }
    .item { background: #16a34a; color: white; padding: 12px 16px; }
  </style>
</head>
<body>
  <div class="list">
    <div class="item">One</div>
    <div class="item">Two</div>
    <div class="item">Three</div>
  </div>
</body>
</html>

Qui il contenitore grigio usa il padding (spazio al suo interno, grigio), gli elementi usano il padding (spazio dentro ciascuno, verde) e gap gestisce lo spazio tra di loro.

Errori comuni

Usare il margin per uno spazio che dovrebbe essere colorato. Il margin è trasparente. Se lo spazio deve mostrare lo sfondo, è padding.
Usare il margin per ingrandire un link. L'area cliccabile finisce al bordo; usa il padding.
Aspettarsi che due margini verticali da 20px facciano 40px. I margini verticali adiacenti collassano a 20px. Il padding non collassa mai.
Provare padding: auto per centrare. Solo il margin accetta auto.
Dimenticare che il padding fa crescere il riquadro. Aggiungi box-sizing: border-box perché width lo includa.

Domande frequenti

Qual è la differenza tra margin e padding?

Il padding è lo spazio tra il contenuto di un elemento e il suo bordo, all'interno dell'elemento. Il margin è lo spazio fuori dal bordo, tra l'elemento e i suoi vicini. Il padding mostra lo sfondo dell'elemento; il margin è sempre trasparente.

Quando usare il padding invece del margin?

Usa il padding per lo spazio che appartiene all'elemento: lo spazio intorno al testo di un pulsante, l'interno di una card, tutto ciò che deve condividere lo sfondo o essere cliccabile. Usa il margin (o gap in flex e grid) per lo spazio tra elementi separati.

Padding o margin aumentano la dimensione dell'elemento?

Il padding sì, con il valore predefinito box-sizing: content-box: viene aggiunto a larghezza e altezza. Il margin non si somma mai alla dimensione dell'elemento; aggiunge spazio intorno (un blocco con width: auto diventa anzi più stretto, perché i suoi margini occupano parte della larghezza disponibile). Con box-sizing: border-box, invece, il padding viene preso dall'interno della larghezza.

Il padding può essere negativo come il margin?

No. Un padding negativo non è valido e viene ignorato, mentre i margini negativi sono ammessi e possono far sovrapporre gli elementi. Il padding inoltre non può essere auto, ed è per questo che per centrare si usa margin: 0 auto.

Concetti correlati