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.
Iniziamo con un primo semplice div senza padding.
Codice:
#div1 {
background: Silver;
width: 300px;
}
In questo caso applichiamo il padding solo sul lato inferiore.
Codice:
#div2 {
background: Silver;
width: 300px;
padding-bottom: 50px;
}
Passiamo al lato sinistro.
Codice:
#div3 {
background: Silver;
width: 300px;
padding-left: 50px;
}
E do ora a quello superiore.
Codice:
#div4 {
background: silver;
width: 300px;
padding-top: 50px;
}
Finiamo la serie dlle proprietà singole con il padding destro.
Codice:
#div5 {
background: silver;
width: 300px;
padding-right: 50px;
}
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;
}