PCdaZERO.it - Guida facile per usare il computer

Acquista o scarica gratis, i libri di "PC da Zero"

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> ...
01-padding-0 (8K)
...
<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> ...
01-padding-15 (9K)

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).







Link sponsorizzati