Proprietà CSS Padding

La proprietà CSS padding crea spazio all'interno di un elemento, tra il suo contenuto e il suo bordo. A differenza di margin — che aggiunge spazio all'esterno del bordo, tra elementi adiacenti — il padding fa parte dell'elemento stesso: condivide il background dell'elemento ed è incluso nell'area di click/hover.

Questa pagina tratta le quattro proprietà di padding individuali, la proprietà abbreviata padding e tutte le sue forme di valore (da uno a quattro valori), le unità e le percentuali utilizzabili, nonché le insidie (percentuali, box-sizing, e perché il padding non si sovrappone mai come fanno i margin).

I lati individuali

Con l'aiuto delle seguenti proprietà puoi impostare il padding per ogni lato di un elemento:

Come puoi intuire, per il lato superiore si usa padding-top, per il basso padding-bottom, per il lato sinistro padding-left e per il destro padding-right.

Tutte le proprietà di padding accettano i seguenti valori:

length — una dimensione fissa in px, em, rem, pt, cm, ecc. (ad esempio padding-top: 16px).
percentuale (%) — un padding relativo alla larghezza del blocco contenitore. Attenzione: un padding percentuale verticale (top/bottom) viene calcolato anch'esso dalla larghezza del contenitore, non dalla sua altezza. Questo è ciò che permette al classico trucco "padding-bottom percentuale" per le box con rapporto d'aspetto di funzionare.
inherit — prende il padding calcolato dell'elemento padre.

Alcune regole da ricordare:

Il padding non può essere negativo. Se hai bisogno di spostare il contenuto nell'altra direzione, usa margin o transform.
Il valore predefinito di ogni proprietà di padding è 0.
Il padding non si sovrappone. I margin verticali adiacenti possono unirsi in uno (margin collapsing), ma due padding si sommano sempre — quindi gli elementi in pila mantengono entrambi i loro padding.
Per impostazione predefinita, il padding viene aggiunto sopra la width/height dichiarata. Una box larga 200px con padding: 20px viene resa larga 240px. Imposta box-sizing: border-box per fare in modo che il padding si adatti all'interno della larghezza dichiarata.

Esempio delle proprietà di padding individuali:

Esempio di utilizzo delle proprietà di padding individuali:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: yellow;
        padding-top: 50px;
        padding-right: 30px;
        padding-bottom: 50px;
        padding-left: 80px;
      }
    </style>
  </head>
  <body>
    <h2>Individual padding properties</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..
    </div>
  </body>
</html>

Provalo tu stesso »

Padding come proprietà abbreviata

La proprietà CSS padding è un'abbreviazione delle quattro proprietà individuali:

Il numero di valori che passi cambia il modo in cui vengono mappati sui quattro lati:

Valori	`padding: …`	Top	Right	Bottom	Left
1	`35px`	35px	35px	35px	35px
2	`20px 40px`	20px	40px	20px	40px
3	`20px 15px 35px`	20px	15px	35px	15px
4	`25px 50px 75px 100px`	25px	50px	75px	100px

L'ordine a quattro valori è in senso orario dall'alto: top, right, bottom, left. Con due o tre valori, i lati mancanti rispecchiano il lato opposto.

Quando la proprietà padding ha solo 1 valore, ad esempio padding: 35px, tutti e quattro i padding sono 35px.

Esempio della proprietà abbreviata padding con un valore:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: green;
        padding: 35px;
      }
    </style>
  </head>
  <body>
    <h2>Padding shorthand with one value</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Provalo tu stesso »

La proprietà padding può avere 2 valori, ad esempio padding: 20px 40px, dove i padding in alto e in basso sono 20px, mentre i padding a destra e a sinistra sono 40px.

Esempio CSS padding con 2 valori

p {
  padding: 20px 40px;
}

Questo equivale al codice seguente.

Esempio CSS padding con 2 valori, forma estesa

p {
  padding-top: 20px;
  padding-right: 40px;
  padding-bottom: 20px;
  padding-left: 40px;
}

Esempio della proprietà abbreviata padding con due valori:

Esempio di codice CSS padding

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
        background-color: #1c87c9;
        color: white;
        padding: 20px 40px;
      }
    </style>
  </head>
  <body>
    <p>Paragraph with background-color, color and padding properties.</p>
  </body>
</html>

Provalo tu stesso »

Risultato

La proprietà padding può avere 3 valori, ad esempio padding: 20px 15px 35px;, dove il padding superiore è 20px, i padding destro e sinistro sono 15px e il padding inferiore è 35px.

Esempio CSS padding con 3 valori

p {
  padding: 20px 15px 35px;
}

Questo equivale al codice seguente.

Esempio CSS padding con 3 valori, forma estesa

p {
  padding-top: 20px;
  padding-right: 15px;
  padding-bottom: 35px;
  padding-left: 15px;
}

Esempio della proprietà abbreviata padding con tre valori:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: lightblue;
        padding: 20px 15px 35px;
      }
    </style>
  </head>
  <body>
    <h2>Example of the padding shorthand property</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Provalo tu stesso »

Infine, la proprietà padding può avere quattro valori, ad esempio padding: 25px 50px 75px 100px;, dove il padding superiore è 25px, quello destro è 50px, quello inferiore è 75px e quello sinistro è 100px.

Esempio CSS padding equivalente

p {
  padding: 25px 50px 75px 100px;
}

Esempio della proprietà abbreviata padding con quattro valori:

Esempio della proprietà abbreviata padding con quattro valori (top, right, bottom, left — in senso orario):

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        background-color: #95e5f7;
        padding: 25px 50px 75px 100px;
      }
    </style>
  </head>
  <body>
    <h2>Example of the padding shorthand property</h2>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </body>
</html>

Provalo tu stesso »

Padding vs. margin

Il padding e il margin sono facili da confondere. Usa il padding quando vuoi dello spazio all'interno di una box — tra il testo e il suo bordo o background. Usa il margin quando vuoi spazio tra una box e gli elementi circostanti.

Differenze pratiche principali:

Il padding condivide il colore di background dell'elemento; il margin è sempre trasparente.
Il padding fa parte dell'area cliccabile dell'elemento (utile per pulsanti e link); il margin no.
I margin possono sovrapporsi tra elementi fratelli; i padding non lo fanno mai.

Argomenti correlati

CSS margin — il corrispettivo del padding all'esterno del bordo.
CSS box-sizing — controlla se il padding si aggiunge o si adatta all'interno della width dell'elemento.
padding-top, padding-right, padding-bottom, padding-left — le proprietà longhand individuali.

Esercitazione

Pratica

Quale delle seguenti descrizioni della proprietà 'padding' in CSS è corretta?

La proprietà padding crea spazio aggiuntivo all'interno dell'elemento soltanto.La proprietà padding aggiunge spazio extra intorno al contenuto dell'elemento, all'esterno di eventuali bordi definiti.La proprietà padding è una proprietà abbreviata per impostare padding-top, padding-right, padding-bottom e padding-left in una singola dichiarazione.La proprietà padding cambia il colore di background di un elemento.La proprietà padding assegna una texture all'elemento.