Imbottitura CSS
Il riempimento viene utilizzato per creare spazio attorno al contenuto di un elemento, all'interno di qualsiasi bordo definito.
Imbottitura CSS
Le proprietà CSS paddingvengono utilizzate per generare spazio attorno al contenuto di un elemento, all'interno di qualsiasi bordo definito.
Con CSS, hai il pieno controllo del padding. Esistono proprietà per impostare il riempimento per ciascun lato di un elemento (in alto, a destra, in basso e a sinistra).
Imbottitura - Singoli lati
CSS ha proprietà per specificare il riempimento per ciascun lato di un elemento:
padding-toppadding-rightpadding-bottompadding-left
Tutte le proprietà di riempimento possono avere i seguenti valori:
- lunghezza - specifica un riempimento in px, pt, cm, ecc.
- % - specifica un riempimento in % della larghezza dell'elemento contenitore
- ereditare - specifica che il riempimento deve essere ereditato dall'elemento padre
Nota: non sono ammessi valori negativi.
Esempio
Imposta un riempimento diverso per tutti e quattro i lati di un elemento <div>:
div {
padding-top: 50px;
padding-right: 30px;
padding-bottom: 50px;
padding-left: 80px;
}
Imbottitura - Proprietà di stenografia
Per abbreviare il codice, è possibile specificare tutte le proprietà del padding in una proprietà.
La paddingproprietà è una proprietà abbreviata per le seguenti proprietà di riempimento individuali:
padding-toppadding-rightpadding-bottompadding-left
Quindi, ecco come funziona:
Se la paddingproprietà ha quattro valori:
- imbottitura: 25px 50px 75px 100px;
- l'imbottitura superiore è 25px
- il riempimento a destra è 50px
- l'imbottitura inferiore è 75px
- il riempimento sinistro è 100px
Esempio
Utilizzare la proprietà scorciatoia di riempimento con quattro valori:
div {
padding: 25px 50px 75px 100px;
}
Se la paddingproprietà ha tre valori:
- imbottitura: 25px 50px 75px;
- l'imbottitura superiore è 25px
- i padding destro e sinistro sono 50px
- l'imbottitura inferiore è 75px
Esempio
Utilizzare la proprietà scorciatoia di riempimento con tre valori:
div {
padding: 25px 50px 75px;
}
Se la paddingproprietà ha due valori:
- imbottitura: 25px 50px;
- i padding superiore e inferiore sono 25px
- i padding destro e sinistro sono 50px
Esempio
Utilizzare la proprietà scorciatoia di riempimento con due valori:
div {
padding: 25px 50px;
}
Se la paddingproprietà ha un valore:
- imbottitura: 25px;
- tutti e quattro i padding sono 25px
Esempio
Usa la proprietà scorciatoia di riempimento con un valore:
div {
padding: 25px;
}
Imbottitura e larghezza dell'elemento
La proprietà CSS widthspecifica la larghezza dell'area del contenuto dell'elemento. L'area del contenuto è la porzione all'interno del riempimento, del bordo e del margine di un elemento ( il modello box ).
Quindi, se un elemento ha una larghezza specificata, il riempimento aggiunto a quell'elemento verrà aggiunto alla larghezza totale dell'elemento. Questo è spesso un risultato indesiderabile.
Esempio
Qui, all'elemento <div> viene assegnata una larghezza di 300px. Tuttavia, la larghezza effettiva dell'elemento <div> sarà 350px (300px + 25px di riempimento sinistro + 25px di riempimento destro):
div {
width: 300px;
padding: 25px;
}
Per mantenere la larghezza a 300px, indipendentemente dalla quantità di riempimento, puoi utilizzare la
box-sizingproprietà. Ciò fa sì che l'elemento mantenga la sua larghezza effettiva; se aumenti il padding, lo spazio contenuto disponibile diminuirà.
Esempio
Usa la proprietà box-sizing per mantenere la larghezza a 300px, indipendentemente dalla quantità di riempimento:
div {
width: 300px;
padding: 25px;
box-sizing: border-box;
}
Altri esempi
Questo esempio mostra come impostare il riempimento sinistro di un elemento <p>.
Questo esempio mostra come impostare il riempimento corretto di un elemento <p>.
Questo esempio mostra come impostare il riempimento superiore di un elemento <p>.
Questo esempio mostra come impostare il riempimento inferiore di un elemento <p>.
Tutte le proprietà del riempimento CSS
| Property | Description |
|---|---|
| padding | A shorthand property for setting all the padding properties in one declaration |
| padding-bottom | Sets the bottom padding of an element |
| padding-left | Sets the left padding of an element |
| padding-right | Sets the right padding of an element |
| padding-top | Sets the top padding of an element |