Padding

Esempi sull'uso del padding. Presentiamo una serie di semplici box resi con l'elemento <div> cui abbiamo applicato la proprietà. Da tutti dovrebbe emergere con chiarezza la differenza con i margini.

Senza padding

Iniziamo con un primo semplice div senza padding.

Codice:

#div1 {
background: Silver;
width: 300px;
}

Un semplice div senza padding.

padding-bottom

In questo caso applichiamo il padding solo sul lato inferiore.

Codice:

#div2 {
background: Silver;
width: 300px;
padding-bottom: 50px;
}

Il testo è separato da 50px dal bordo inferiore. padding-bottom: 50px;

padding-left

Passiamo al lato sinistro.

Codice:

#div3 {
background: Silver;
width: 300px;
padding-left: 50px;
}

Il testo inizia a 50px dal bordo sinistro.

padding-top

E do ora a quello superiore.

Codice:

#div4 {
background: silver;
width: 300px;
padding-top: 50px;
}

Il testo è a 50px dal bordo superiore. padding-top: 50px;

padding-right

Finiamo la serie dlle proprietà singole con il padding destro.

Codice:

#div5 {
background: silver;
width: 300px;
padding-right: 50px;
}

Con padding-right si crea uno spazio di 50px sul lato destro.

padding

Come per la proprietà margin si può usare una proprietà a sintassi abbreviata per impostare il padding su tutti i quattro lati.

Codice:

#div6 {
background: silver;
width: 300px;
padding: 20px 50px 20px 30px;
}

#div8 con l'uso della proprietà padding