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). |
Ti potrebbe interessare anche...
Fare calcoli e creare elenchi con
- Come creare un blog gratis
- Come creare siti web gratis
- Gestisci le tue foto con Picasa
- Naviga veloce con Google Chrome
- Scarica video e musica con Free Studio
Frasi celebri
“Se non lo sai spiegare in modo semplice, non l'hai capito abbastanza bene” (Albert Einstein).