Il padding degli elementi in CSS

Il padding è lo spazio interno di un elemento, situato tra il contenuto dell'elemento e il suo bordo. A differenza dei margini (che abbiamo visto nella lezione precedente), il padding fa parte dell'elemento.

Le proprietà del padding

Il padding può essere impostato con la proprietà base padding, ma può anche essere scelto per ogni singolo lato dell'elemento: superiore, destro, inferiore e sinistro.

Ecco cosa puoi usare per impostare il padding:

I valori possibili da usare

Tutte le proprietà di padding possono avere solo valori positivi, tra cui:

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

La proprietà padding

La proprietà padding, può accettare uno, due, tre o quattro valori per impostare i padding in un'unica proprietà.

Un valore

Imposta lo stesso padding su tutti e quattro i lati.

<p>Ho il padding uguale per tutti i lati</p>

<style>
p {
  padding: 30px;
  border: 1px solid red;
}
</style>

Nell'esempio, abbiamo aggiunto un bordo rosso (che abbiamo visto nella lezione dei bordi CSS) per rendere visibile il padding.

Due valori

Il primo valore imposta i padding superiore e inferiore, il secondo valore imposta i padding destro e sinistro.

<p>Ho il padding 10px su sopra/sotto, 30px su destra/sinistra</p>

<style>
p {
  padding: 10px 30px;
  border: 1px solid red;
}
</style>

Tre valori

Il primo valore imposta il padding superiore, il secondo valore imposta i padding destro e sinistro, il terzo valore imposta il padding inferiore.

<p>Ho il padding 10px in alto, 20px su destra/sinistra, 30px in basso</p>

<style>
p {
  padding: 10px 20px 30px;
  border: 1px solid red;
}
</style>

Quattro valori

Imposta i padding in senso orario partendo dall'alto (top, right, bottom, left) per ogni lato.

<p>Ho il padding 10px in alto, 20px a destra, 30px in basso, 40px a sinistra).</p>

<style>
p {
  padding: 10px 20px 30px 40px;
  border: 1px solid red;
}
</style>

Il padding e width

La proprietà padding influisce sulla larghezza complessiva di un elemento quando viene applicata insieme alla proprietà width (che abbiamo visto nelle dimensioni degli elementi).  Il padding aggiunto non modifica la larghezza specificata dell'elemento (width), ma si somma alla larghezza totale. Di conseguenza, la larghezza totale di un elemento con padding sarà la somma della larghezza specificata, del padding e del bordo (se presente).

Ad esempio, se un elemento ha width:200px e padding-left:50px, la larghezza totale sarà 250px, anche se quella impostata era 200px.

<p>La lunghezza di questo elemento è 250px</p>

<style>
p {
  width: 200px;
  padding-left: 50px;
}
</style>

Per evitare ciò, possiamo usare la proprietà CSS box-sizing:border-box. Nell'esempio, la larghezza dell'elemento è di 200px, anche se il padding è impostato.

<p>La lunghezza di questo elemento è 200px</p>

<style>
p {
  width: 200px;
  padding-left: 50px;
  box-sizing: border-box;
}
</style>