Proprietà padding
La proprietà padding imposta la spaziatura
interna di un elemento. I valori della proprietà sono
qualsiasi unità
di misura per le dimensioni. Per impostazione predefinita, ogni browser
può aggiungere diverse spaziature agli elementi.
La proprietà è una scorciatoia per le proprietà
padding-top,
padding-right,
padding-bottom,
padding-left.
Sintassi
selettore {
padding: valore;
}
Numero di parametri
La proprietà padding accetta 1,
2, 3 o 4 valori,
elencati separati da uno spazio:
| Quantità | Descrizione |
|---|---|
1 |
Un valore imposta la spaziatura su tutti i lati dell'elemento. |
2 |
Il primo valore imposta la spaziatura in alto e in basso, il secondo - a destra e a sinistra. |
3 |
Il primo valore imposta la spaziatura in alto, il secondo - a destra e a sinistra, il terzo - in basso. |
4 |
Il primo valore imposta la spaziatura in alto, il secondo - a destra, il terzo - in basso, il quarto - a sinistra. |
Esempio
In questo caso, per impostazione predefinita, la spaziatura interna sarà zero e il testo sarà premuto contro il bordo del blocco:
<div id="elem">
some long text
</div>
#elem {
padding: 0;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Esempio
Ora creiamo una spaziatura interna
di 30px:
<div id="elem">
some long text
</div>
#elem {
padding: 30px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Esempio
Ora la spaziatura in alto e in basso sarà 20px,
e a destra e a sinistra - 5px:
<div id="elem">
some long text
</div>
#elem {
padding: 20px 5px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Esempio
Ora la spaziatura in alto è 5px, a destra -
15px, in basso - 25px, a sinistra -
35px:
<div id="elem">
some long text
</div>
#elem {
padding: 5px 15px 25px 35px;
width: 300px;
border: 1px solid black;
text-align: justify;
}
:
Vedi anche
-
la proprietà
margin,
che imposta la spaziatura esterna