Proprietà padding

La proprietà padding imposta la spaziatura interna di un elemento. I valori della proprietà sono qualsiasi unità di misura per le dimensioni. Per impostazione predefinita, ogni browser può aggiungere diverse spaziature agli elementi. La proprietà è una scorciatoia per le proprietà padding-top, padding-right, padding-bottom, padding-left.

Sintassi

cssselettore {
  padding: valore;
}

La proprietà padding accetta 1, 2, 3 o 4 valori, elencati separati da uno spazio:

Quantità	Descrizione
`1`	Un valore imposta la spaziatura su tutti i lati dell'elemento.
`2`	Il primo valore imposta la spaziatura in alto e in basso, il secondo - a destra e a sinistra.
`3`	Il primo valore imposta la spaziatura in alto, il secondo - a destra e a sinistra, il terzo - in basso.
`4`	Il primo valore imposta la spaziatura in alto, il secondo - a destra, il terzo - in basso, il quarto - a sinistra.

In questo caso, per impostazione predefinita, la spaziatura interna sarà zero e il testo sarà premuto contro il bordo del blocco:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 0;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Ora creiamo una spaziatura interna di 30px:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 30px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Ora la spaziatura in alto e in basso sarà 20px, e a destra e a sinistra - 5px:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 20px 5px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат:

Ora la spaziatura in alto è 5px, a destra - 15px, in basso - 25px, a sinistra - 35px:

html<div id="elem">
  some long text
</div>

css#elem {
  padding: 5px 15px 25px 35px;
  width: 300px;
  border: 1px solid black;
  text-align: justify;
}

Результат: