Proprietà di riempimento CSS
Esempio
Imposta il riempimento per tutti e quattro i lati di un elemento <p> su 35 pixel:
p {
padding: 35px;
}
Altri esempi "Provalo da solo" di seguito.
Definizione e utilizzo
Il riempimento di un elemento è lo spazio tra il suo contenuto e il suo bordo.
La padding
proprietà è una proprietà abbreviata per:
Nota: il riempimento crea spazio aggiuntivo all'interno di un elemento, mentre il margine crea spazio aggiuntivo attorno a un elemento.
Questa proprietà può avere da uno a quattro valori.
Se la proprietà di riempimento ha quattro valori:
- imbottitura: 10px 5px 15px 20px;
- il riempimento superiore è 10px
- il riempimento a destra è 5px
- l'imbottitura inferiore è 15px
- il riempimento sinistro è 20px
Se la proprietà di riempimento ha tre valori:
- imbottitura: 10px 5px 15px;
- il riempimento superiore è 10px
- il riempimento destro e sinistro sono 5px
- l'imbottitura inferiore è 15px
Se la proprietà di riempimento ha due valori:
- imbottitura: 10px 5px;
- il riempimento superiore e inferiore sono 10px
- il riempimento destro e sinistro sono 5px
Se la proprietà di riempimento ha un valore:
- imbottitura: 10px;
- tutti e quattro i padding sono 10px
Nota: non sono ammessi valori negativi.
Valore di default: | 0 |
---|---|
Ereditato: | no |
Animabile: | sì, vedi singole proprietà . Leggi su animabile |
Versione: | CSS1 |
sintassi JavaScript: | oggetto .style.padding="100px 20px" |
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente la proprietà.
Property | |||||
---|---|---|---|---|---|
padding | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Sintassi CSS
padding: length|initial|inherit;
Valori di proprietà
Value | Description | Play it |
---|---|---|
length | Specifies the padding in px, pt, cm, etc. Default value is 0. Read about length units | |
% | Specifies the padding in percent of the width of the containing element | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Altri esempi
Esempio
Imposta il riempimento per un elemento <p> su 35 pixel per la parte superiore e inferiore e su 70 pixel per la destra e la sinistra:
p {
padding: 35px 70px;
}
Esempio
Imposta il riempimento per un elemento <p> su 35 pixel per la parte superiore, 70 pixel per destra e sinistra e su 50 pixel per la parte inferiore:
p {
padding: 35px 70px 50px;
}
Esempio
Imposta il riempimento per un elemento <p> su 35 pixel per la parte superiore, 70 pixel per la destra, 50 pixel per la parte inferiore e su 90 pixel per la sinistra:
p {
padding: 35px 70px 50px 90px;
}
Pagine correlate
Tutorial CSS: riempimento CSS
Tutorial CSS: Modello CSS Box
Riferimento HTML DOM: proprietà di riempimento