Proprietà CSS padding-right
Come usare la proprietà CSS padding-right per definire lo spazio di padding a destra di un elemento. Valori ed esempi.
La proprietà CSS padding-right imposta la larghezza dell'area di padding sul lato destro di un elemento. Il padding è lo spazio trasparente tra il contenuto di un elemento e il suo bordo: aumentare padding-right sposta il bordo destro più lontano dal contenuto (il contenuto rimane nella stessa posizione; l'elemento diventa più largo a meno che box-sizing non sia impostato su border-box).
Questa pagina illustra i valori accettati (lunghezze, percentuali e le parole chiave CSS globali), come viene calcolato il padding in percentuale e degli esempi eseguibili per ciascun caso. Per impostare solo il padding destro usa padding-right; per impostare tutti e quattro i lati contemporaneamente usa la proprietà abbreviata padding.
I valori negativi non sono validi.
Questa proprietà non ha alcun effetto sugli elementi inline, come <span>.
| Valore iniziale | 0 |
|---|---|
| Si applica a | Tutti gli elementi. Fa eccezione quando la proprietà display è impostata su table-row-group, table-header-group, table-footer-group, table-row, table-column-group e table-column. Si applica anche a ::first-letter. |
| Ereditato | No. |
| Animabile | Sì. Lo spazio di padding è animabile. |
| Versione | CSS1 |
| Sintassi DOM | object.style.paddingRight = "40px"; |
Con l'aiuto della proprietà padding puoi impostare i padding su tutti i lati di un elemento con una singola dichiarazione.
Sintassi
Sintassi della proprietà CSS padding-right
padding-right: length | initial | inherit;Esempio della proprietà padding-right:
Esempio della proprietà CSS padding-right con valore px
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #8ebf42;
padding-right: 100px;
}
</style>
</head>
<body>
<h2>Padding-right property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s...</p>
</body>
</html>Risultato
Esempio della proprietà padding-right con valore "length":
Esempio della proprietà CSS padding-right con valore pt
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #8ebf42;
padding-right: 100pt;
}
</style>
</head>
<body>
<h2>Padding-right property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</body>
</html>Esempio della proprietà padding-right specificata in percentuale:
Esempio della proprietà CSS padding-right con valore %:
Un valore percentuale viene risolto rispetto alla larghezza del blocco contenitore dell'elemento, non alla sua altezza. Ciò significa che il padding destro si adatta quando il layout diventa più largo o più stretto, il che è utile per una spaziatura fluida e responsiva.
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px solid #cccccc;
color: deepskyblue;
padding: 15px;
padding-right: 10%;
}
</style>
</head>
<body>
<h2>Padding-right property example</h2>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
</p>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| length | Imposta il padding destro in px, pt, cm, ecc. Il valore predefinito è 0px. | Prova » |
| % | Imposta il padding destro in percentuale della larghezza dell'elemento contenitore. | Prova » |
| initial | Imposta la proprietà al suo valore predefinito. | Prova » |
| inherit | Eredita la proprietà dall'elemento genitore. |
Quando usare padding-right
Usa padding-right quando hai bisogno di spazio solo sul bordo destro di un box — ad esempio, per tenere il testo lontano da un'icona finale, per lasciare spazio a una barra di scorrimento, o per bilanciare una spaziatura asimmetrica in una card. Se hai bisogno di una spaziatura uguale su tutti i lati, preferisci la proprietà abbreviata padding; se hai bisogno dello spazio fuori dal bordo invece che dentro, usa margin-right.
Alcune cose da tenere a mente:
- Il padding fa parte dell'area cliccabile / di sfondo. Il colore di sfondo e l'immagine di sfondo dell'elemento si estendono attraverso il padding, a differenza del margin.
- I valori negativi non sono validi. Per spostare il contenuto nell'altra direzione, usa un
marginnegativo. - Allarga il box per impostazione predefinita. Con il modello standard
content-box,padding-rightsi aggiunge alla larghezza totale dell'elemento. Impostabox-sizing: border-boxper mantenere fissa la larghezza dichiarata e assorbire il padding verso l'interno.
Proprietà correlate
padding-left— padding sul lato oppostopadding-topepadding-bottompadding— proprietà abbreviata per tutti e quattro i latimargin-right— spazio esterno al bordo