Il padding

Il padding permette di impostare la distanza dal bordo di un elemento all'elemento vicino. La propretà padding imposta le distanze nelle quattro direzioni: Alto, Basso, Destra e Sinistra.

La sintassi per il padding può essere scritta in 2 modi. Scrivendo un padding per ogni direzione oppure usando un padding generico con quattro valori.

Vediamo alcuni esempi:

Un comando per ogni direzione:

padding-top : 10px;

padding-bottom : 10px;

padding-left : 10px;

padding-rigth : 10px;

Imposta 10 pixel in alto

Imposta 10 pixel in basso

Imposta 10 pixel a sinistra

Imposta 10 pixel a destra

Un padding con 4 valori:

padding : 10px 8px 6px 4px;

Imposta rispettivamente:

10 pixel in alto; 8 pixel a destra

6 pixel in basso ; 4 pixel a sinistra

Se tutte le distanze sono uguali possiamo scrivere un valore solo:

padding : 10px ;

Imposta 10 pixel in tutte le direzioni

Impostare il padding per le immagini:

.immagine img{

padding: 10px ;

}

Tutte le immagini all'interno di blocchi con lo stile immagine avranno un padding di 10 pixel

In questi esempi ho espresso le distanze in pixel (px), ma si possono scrivere anche come percentuali.

(Annunci Google)