Guida CSS interattiva: Padding

Q: In che ordine vanno i valori nella forma abbreviata di padding?

In senso orario partendo dall'alto: padding: top right bottom left;. Con tre valori sono sopra, sinistra e destra, sotto; con due valori, sopra e sotto poi sinistra e destra; con un valore, tutti e quattro i lati.

Q: Il padding aumenta la dimensione di un elemento?

Con il valore predefinito box-sizing: content-box, sì: il padding si aggiunge a width e height. Con box-sizing: border-box, il padding viene preso dall'interno della larghezza, quindi l'elemento mantiene la dimensione che hai impostato.

Q: Come si aggiunge il padding in HTML?

Con il CSS, in un foglio di stile o in un attributo style: . HTML non ha un attributo padding per gli elementi in generale; il vecchio attributo cellpadding delle tabelle è obsoleto ed è sostituito da padding su td e th.

Cos'è il padding

Il padding è lo spazio dentro un elemento, tra il suo contenuto e il suo bordo. Prende lo sfondo dell'elemento, quindi è la proprietà che dà respiro a un pulsante, una card o un badge.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding</title>
  <style>
    .box {
      padding: 24px;
      border: 3px solid #111827;
      /* blue over the content only, green over the padding */
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      width: max-content;
      margin-bottom: 12px;
    }
    .none { padding: 0; }
  </style>
</head>
<body>
  <div class="box none">padding: 0</div>
  <div class="box">padding: 24px (the green band)</div>
</body>
</html>

L'area blu è il contenuto. La fascia verde intorno sono i 24px di padding su ogni lato, e il bordo sta fuori da quella.

La forma abbreviata di padding: 1, 2, 3 o 4 valori

padding imposta tutti e quattro i lati in una sola dichiarazione. Il numero di valori decide quale lato riceve cosa, in senso orario partendo dall'alto:

Dichiarazione	Sopra	Destra	Sotto	Sinistra
`padding: 10px;`	10	10	10	10
`padding: 10px 20px;`	10	20	10	20
`padding: 10px 20px 30px;`	10	20	30	20
`padding: 10px 20px 30px 40px;`	10	20	30	40

Due valori significano "verticale, orizzontale". Tre valori significano "sopra, orizzontale, sotto". Quattro fanno il giro dell'orologio: sopra, destra, sotto, sinistra (un promemoria comune in inglese è TRouBLe: top, right, bottom, left).

Scrivi una forma abbreviata qualsiasi qui sotto. Il riquadro si ridisegna e il browser riporta cosa ha ricevuto ogni lato:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Padding tester</title>
  <style>
    #box {
      width: max-content;
      padding: 10px 20px 30px 40px;
      border: 3px solid #111827;
      background: linear-gradient(#2563eb, #2563eb) content-box, #16a34a;
      color: white;
      margin-top: 10px;
    }
    code { font-size: 14px; }
  </style>
</head>
<body>
  <label>padding: <input id="val" value="10px 20px 30px 40px" size="24"></label>
  <div id="box">content</div>
  <p><code id="out"></code></p>
  <script>
    const box = document.getElementById('box');
    const input = document.getElementById('val');
    const show = () => {
      box.style.padding = input.value;
      const s = getComputedStyle(box);
      document.getElementById('out').textContent =
        'top ' + s.paddingTop + ', right ' + s.paddingRight +
        ', bottom ' + s.paddingBottom + ', left ' + s.paddingLeft;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Prova 8px, 8px 24px, 0 0 40px e 1em 5%. Un valore non valido, come -10px, viene ignorato e il riquadro mantiene l'ultimo padding valido.

Un lato alla volta

Ogni lato ha la sua proprietà, più chiara di una forma abbreviata a quattro valori quando vuoi cambiarne solo uno:

.card {
  padding-top: 16px;
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}

Una forma abbreviata seguita da un singolo lato è uno schema comune: imposti tutto, poi aggiusti un lato.

.card {
  padding: 16px;
  padding-bottom: 32px; /* only the bottom changes */
}

Qui l'ordine conta: una forma abbreviata padding scritta dopo padding-bottom riporterebbe il lato inferiore a 16px.

Padding logico: padding-inline e padding-block

padding-left e padding-right sono fisici: restano sullo stesso lato in ogni lingua. Le proprietà logiche seguono invece la direzione di scrittura, ed è quello che vuoi in un sito mostrato anche da destra a sinistra:

Proprietà logica	In italiano (da sinistra a destra)	In arabo (da destra a sinistra)
`padding-inline-start`	sinistra	destra
`padding-inline-end`	destra	sinistra
`padding-inline`	sinistra e destra	destra e sinistra
`padding-block`	sopra e sotto	sopra e sotto

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Logical padding</title>
  <style>
    .note {
      padding-block: 8px;
      padding-inline-start: 40px; /* space before the text */
      padding-inline-end: 12px;
      border-inline-start: 6px solid #2563eb;
      background: #e5e7eb;
      margin-bottom: 8px;
    }
  </style>
</head>
<body>
  <p class="note">The wide padding is at the start of the line.</p>
  <p class="note" dir="rtl">Right to left: the edge and the wide padding switch sides</p>
</body>
</html>

Il padding ingrandisce il riquadro (tranne con border-box)

Per impostazione predefinita, width è la larghezza del solo contenuto, e il padding si aggiunge sopra. Un riquadro con width: 200px e padding: 20px è largo 240px:

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

box-sizing: border-box mantiene il riquadro a 200px e prende il padding dall'interno. La pagina sul box model mostra tutti i calcoli.

Padding in percentuale

Un padding in percentuale si misura rispetto alla larghezza del genitore, su tutti e quattro i lati, sopra e sotto compresi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Percent padding</title>
  <style>
    .parent { width: 300px; height: 100px; background: #e5e7eb; }
    .child {
      padding-top: 10%; /* 10% of 300px = 30px, not 10% of 100px */
      background: #f59e0b;
    }
  </style>
</head>
<body>
  <div class="parent"><div class="child" id="c"></div></div>
  <p id="out"></p>
  <script>
    document.getElementById('out').textContent =
      'padding-top: ' + getComputedStyle(document.getElementById('c')).paddingTop;
  </script>
</body>
</html>

Da qui viene il vecchio trucco "padding-top: 56.25%" per i riquadri video 16:9. Oggi aspect-ratio: 16 / 9 fa la stessa cosa direttamente.

Padding su pulsanti e link

Il padding è il modo giusto per ingrandire un link o un pulsante, perché fa parte dell'elemento e quindi di ciò che puoi cliccare o toccare. Il margin aggiungerebbe spazio, ma non un bersaglio più grande.

.btn {
  display: inline-block; /* lets vertical padding take space in the line */
  padding: 10px 18px;    /* a comfortable touch target */
}

Valori accettati da padding

Valore	Esempio	Note
Lunghezza	`12px`, `1rem`, `0.5em`	`em` scala con la dimensione del font dell'elemento
Percentuale	`5%`	Della larghezza del blocco contenitore
`0`	`padding: 0`	Non serve l'unità
Negativo	`-10px`	Non valido, ignorato
`auto`	`auto`	Non valido per il padding (funziona per il margin)

Errori comuni

Ordine sbagliato nella forma abbreviata a quattro valori. È sopra, destra, sotto, sinistra, in senso orario.
Un riquadro che cresce quando aggiungi padding. Imposta box-sizing: border-box.
Usare il padding per separare due elementi. Lo spazio tra gli elementi è margin; il padding è lo spazio dentro un elemento. Vedi margin e padding.
Padding verticale su un link inline che si sovrappone alle altre righe. Rendilo inline-block.
Padding negativo o padding: auto. Entrambi non sono validi e vengono ignorati in silenzio.

Domande frequenti

Cos'è il padding in CSS?

Il padding è lo spazio tra il contenuto di un elemento e il suo bordo. Fa parte dell'elemento, quindi mostra il suo colore di sfondo e rende più grande l'area cliccabile di un link o di un pulsante.

In che ordine vanno i valori nella forma abbreviata di padding?

In senso orario partendo dall'alto: padding: top right bottom left;. Con tre valori sono sopra, sinistra e destra, sotto; con due valori, sopra e sotto poi sinistra e destra; con un valore, tutti e quattro i lati.

Il padding aumenta la dimensione di un elemento?

Con il valore predefinito box-sizing: content-box, sì: il padding si aggiunge a width e height. Con box-sizing: border-box, il padding viene preso dall'interno della larghezza, quindi l'elemento mantiene la dimensione che hai impostato.

A cosa si riferisce un padding in percentuale?

Alla larghezza del blocco contenitore, per tutti e quattro i lati. padding-top: 50% è metà della larghezza del genitore, non della sua altezza, ed è per questo che i vecchi trucchi per le proporzioni usavano il padding verticale.

Il padding può essere negativo?

No. Un valore di padding negativo non è valido e la dichiarazione viene ignorata. Per spingere il contenuto verso l'esterno, usa invece un margine negativo.

Come si aggiunge il padding in HTML?

Con il CSS, in un foglio di stile o in un attributo style: <div style="padding: 16px;">. HTML non ha un attributo padding per gli elementi in generale; il vecchio attributo cellpadding delle tabelle è obsoleto ed è sostituito da padding su td e th.

Concetti correlati