Il Padding | Guida CSS

Il=20 Padding

Un altro modo per creare spazio intorno ad un elemento = =E8 quello=20 di usare il padding. Come per i margini, HTML incorpora un=20 meccanismo simile solo per le celle di tabella, tramite il=20 cosiddetto cellpadding. Se avete presente il = funzionamento di=20 questo attributo, vi risulter=E0 immediatamente chiara la = differenza=20 tra margini e padding. Quando si usa il padding, lo spazio = di=20 distanza viene inserito al di qua dei bordi dell'elemento e = non=20 all'esterno. La cosa risulta evidente se usate un colore di = sfondo=20 per l'elemento diverso da quello della pagina. Nel caso del = padding,=20 lo spazio inserito avr=E0 proprio il colore di sfondo = dell'elemento, a=20 differenza dei margini. Pertanto, valutate in base alle = vostre=20 esigenze se usare la prima o la seconda via.

Un'analogia rispetto ai margini sta nella sintassi. Anche = qui=20 quattro propriet=E0 singole per i lati e una a sintassi = abbreviata=20 (padding).

padding-bottom

Imposta l'ampiezza del padding sul lato inferiore di un = elemento.=20 Si applica a tutti gli elementi e non =E8 ereditata.

Valori

un valore numerico con unit=E0 di misura. Il = valore =E8=20 espresso in termini assoluti.=20
un valore in percentuale. Il valore =E8 = calcolato come=20 percentuale rispetto alla larghezza (width) del blocco=20 contenitore.

Esempi

p.box {padding-bottom: 10px;}

padding-left

Imposta l'ampiezza del padding sul lato sinistro di un = elemento.=20 Si applica a tutti gli elementi e non =E8 ereditata.

Valori

un valore numerico con unit=E0 di misura.=20
un valore in percentuale.

Esempi

p {padding-left: 10%;}

padding-top

Imposta l'ampiezza del padding sul lato superiore di un = elemento.=20 Si applica a tutti gli elementi e non =E8 ereditata.

Valori

un valore numerico con unit=E0 di misura.=20
un valore in percentuale.

Esempi

h1 {padding-top: 10px;}

padding-right

Imposta l'ampiezza del padding sul lato destro di un = elemento. Si=20 applica a tutti gli elementi e non =E8 ereditata.

Valori

un valore numerico con unit=E0 di misura.=20
un valore in percentuale.

Esempi

p.box {padding-right: 10px;}

padding

Propriet=E0 a sintassi abbreviata. Serve a impostare i = valori del=20 padding per tutti e quattro i lati di un elemento. Valgono = per essa=20 tutte le osservazioni e le regole sintattiche viste per=20 margin.

Valori

un elenco di valori numerici con unit=E0 di = misura.=20
un elenco di valori in percentuale.

Esempi

p {padding: 10px 20px;}
div {padding: = 10%;}

Anche per il padding avete a disposizione un documento di esempio.

Ricordiamo un'ultima interessante applicazione di margini = e=20 padding. Ogni browser inserisce un margine pi=F9 o meno = ampio tra il=20 bordo della finestra e l'area del contenuto.In HTML era = possibile=20 eliminarlo tramite una serie di attributi (e qui Explorer e = Netscape=20 avevano sintassi diverse) dell'elemento body:

La stessa cosa si pu=F2 ottenere con i CSS (tra l'altro = quegli=20 attributi sono da tempo considerati svalutati dal W3C):

body {
margin: 0px;
padding: 0px; = }

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =