Gestire il padding con i CSS

24 giugno 2013

Se i margini servono a creare spazio intorno ad un box, il padding è utile per creare spazio intorno al contenuto del box. Tra margini e padding vi è, insomma, una fondamentale differenza: quando si usa il padding, lo spazio di distanza viene inserito all’interno dei bordi dell’elemento e non all’esterno. Riprendiamo l’immagine vista nella lezione 13 per rendere chiaro il concetto:

Figura 1 – Rappresentazione dei componenti del box model

screenshot

La cosa risulta evidente se si usa per l’elemento un colore di sfondo diverso da quello della pagina. Nel caso del padding, lo spazio inserito avrà proprio il colore di sfondo dell’elemento, a differenza dei margini, per i quali il colore sarà quello dell’elemento contenitore.

Un’analogia rispetto ai margini è nella sintassi. Anche qui quattro proprietà singole per i lati e una a sintassi abbreviata (padding).

padding-top

Imposta l’ampiezza del padding sul lato superiore di un elemento. Si applica  a tutti gli elementi e non è ereditata.

Sintassi ed esempi

selettore {padding-top: valore;}

I valori possono essere:

  • un valore numerico con unità di misura;
  • un valore in percentuale calcolato come percentuale rispetto alla larghezza (width) del blocco contenitore.
div {padding-top: 40px;}
p {padding-top: 20%;}

padding-right

Imposta l’ampiezza del padding sul lato destro di un elemento. Si applica  a tutti gli elementi e non è ereditata.

Sintassi ed esempi

selettore {padding-right: valore;}

I valori possono essere rappresentati da:

  • un valore numerico con unità di misura;
  • un valore in percentuale.
div {padding-right: 40px;}
p {padding-right: 20%;}

padding-bottom

Imposta l’ampiezza del padding sul lato inferiore di un elemento. Si applica  a tutti gli elementi e non è ereditata.

Sintassi ed esempi

selettore {padding-bottom: valore;}

I valori possono essere rappresentati da:

  • un valore numerico con unità di misura;
  • un valore in percentuale.
div {padding-bottom: 40px;}
p {padding-bottom: 20%;}

padding-left

Imposta l’ampiezza del padding sul lato sinistro di un elemento. Si applica  a tutti gli elementi e non è ereditata.

Sintassi ed esempi

selettore {padding-left: valore;}

I valori possono essere rappresentati da:

  • un valore numerico con unità di misura;
  • un valore in percentuale.
div {padding-left: 40px;}
p {padding-left: 20%;}

padding

Proprietà a sintassi abbreviata. Serve a impostare i valori del padding per tutti e quattro i lati di un elemento. Valgono per essa tutte le osservazioni e le regole sintattiche viste per la proprietà margin nella lezione 16.

Sintassi ed esempi

La sintassi di base per questa proprietà è la seguente:

selettore {padding: valore-1, valore-2, valore-3, valore-4;}

I valori possono essere:

  • un elenco di valori numerici con unità di misura;
  • un elenco di valori in percentuale.

Nella definizione dei valori è possibile mischiare percentuali con valori assoluti in unità di misura.

Un’ulteriore abbreviazione della sintassi si può ottenere usando tre, due o un solo valore. Queste le regole:

  • se si usano tre valori, il primo si riferisce al margine superiore, il secondo a quelli sinistro e destro, il terzo a quello inferiore;
  • se si usano due valori, il primo si riferisce ai lati superiore e inferiore, il secondo al sinistro e al destro;
  • se si usa un solo valore, un uguale distanza sarà applicata ai quattro lati.

Esempi.

Tutte le lezioni

1 ... 16 17 18 ... 33

Se vuoi aggiornamenti su Gestire il padding con i CSS inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su Gestire il padding con i CSS

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy