CREARE SITI WEB in HTML e CSS > Inserire spazio tra contenuto e bordo
La proprietà margin distanzia un blocco dall'altro.
Per ottenere invece, uno spazio tra il bordo di un blocco e il suo contenuto, è necessario usare la proprietà padding.
Ecco alcuni esempi:
codice HTML | risultato pagina web |
... <style type="text/css"> p { padding: 0; border: 5px solid } </style> ... <body> <p>Inserimento testo di prova per verificare l'effetto della proprietà padding. Inizialmente impostandola a zero pixel e in seguito impostandola a 15 pixel</p> </body> ... |
![]() |
... <style type="text/css"> p { padding: 15px; border: 5px solid } </style> ... <body> <p>Inserimento testo di prova pr verificare l'effetto della proprietà padding. Inizialmente impostandola a zero pixel e in seguito impostandola a 15 pixel</p> </body> ... |
![]() |
Come per il margine, è possibile assegnare un padding diverso per ogni lato.
proprietà | descrizione | esempio |
padding-top | imposta il padding sul lato superiore | {padding-top:10px} |
padding-left | imposta il padding sul lato sinistro | {padding-left:15px} |
padding-bottom | imposta il padding sul lato inferiore | {padding-bottom:5px} |
padding-right | imposta il padding sul lato destro | {padding-right:20px} |
Oppure, sempre come per la proprietà margin, è possibile usare una forma più contratta e semplice:
codice CSS | descrizione del codice |
{padding: 5px;} | imposta uno spazio uguale (5px) per tutti i quattro lati |
{padding: 5px 10px;} |
Il primo valore (5px) è assegnato al lato
superiore ed inferiore; il secondo valore (10px) è assegnato al lato sinistro e destro. |
{padding: 5px 10px 25px;} |
Il primo valore (5px) è assegnato al lato
superiore; il secondo valore (10px) è assegnato al lato sinistro e destro. Il terzo valore (25px) è assegnato al lato inferiore; |
{padding: 5px 10px 25px 15px;} |
I quattro valori vengono assegnati
rispettivamente al lato: superiore (5px), destro(10px), inferiore(25px), sinistro(15px). |