Proprietà CSS padding
Scopri come la proprietà CSS padding aggiunge spazio all'interno del bordo di un elemento. Sintassi shorthand, regole da uno a quattro valori, percentuali e avvertenze.
La proprietà padding aggiunge spazio tra il contenuto di un elemento e il suo bordo. A differenza di margin, che spinge gli elementi verso l'esterno, il padding agisce all'interno — allarga l'area cliccabile o visibile dell'elemento mantenendo il bordo in posizione.
I valori del padding si impostano usando lunghezze o percentuali e sono sempre non negativi.
I valori negativi non sono consentiti per il padding. Usa un margin negativo se hai bisogno di spostare il contenuto verso l'interno.
padding è una proprietà shorthand che imposta tutti e quattro i lati contemporaneamente. È possibile controllare ogni lato singolarmente:
Come il padding si inserisce nel box model
Ogni elemento HTML è avvolto nel box model di CSS: contenuto → padding → bordo → margin, dall'interno verso l'esterno. Il padding si trova tra l'area del contenuto e il bordo, quindi fa parte della regione di sfondo dell'elemento.
Quando si imposta box-sizing: border-box (il valore predefinito moderno nella maggior parte dei reset), il padding è incluso nella width e height dichiarate. Con il legacy box-sizing: content-box, il padding viene aggiunto in cima a quelle dimensioni. Consulta box-sizing per i dettagli.
Riferimento della proprietà
| Valore iniziale | 0 |
| Si applica a | Tutti gli elementi eccetto table-row-group, table-header-group, table-footer-group, table-row, table-column-group e table-column. Si applica anche a ::first-letter. |
| Ereditata | No |
| Animabile | Sì |
| Versione | CSS1 |
| Sintassi DOM | element.style.padding = "30px" |
Sintassi
padding: <length> | <percentage> | initial | inherit;Regola da uno a quattro valori
La shorthand accetta uno, due, tre o quattro valori separati da spazio. La mappatura segue l'ordine in senso orario: top → right → bottom → left.
| Valori forniti | Top | Right | Bottom | Left |
|---|---|---|---|---|
padding: 20px | 20px | 20px | 20px | 20px |
padding: 20px 40px | 20px | 40px | 20px | 40px |
padding: 10px 20px 30px | 10px | 20px | 30px | 20px |
padding: 10px 20px 30px 40px | 10px | 20px | 30px | 40px |
Un utile aiuto mnemonico: i valori mancanti rispecchiano il lato opposto (left rispecchia right; bottom rispecchia top).
Esempi
Quattro valori (top / right / bottom / left)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 15px 30px 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>Il paragrafo riceve 15 px in alto, 30 px a destra, 20 px in basso e 40 px a sinistra.
Valori percentuali
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 5% 10% 10% 5%;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>I valori di padding percentuali — inclusi padding-top e padding-bottom — sono sempre calcolati rispetto alla larghezza del blocco contenitore, non alla sua altezza. Ciò rende semplice creare box con proporzioni fisse: un blocco con padding-top: 56.25% mantiene un rapporto 16:9 indipendentemente dalla sua larghezza.
Due valori (verticale / orizzontale)
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
background-color: #1c87c9;
color: #fff;
padding: 20px 40px;
}
</style>
</head>
<body>
<h2>Padding property example</h2>
<p>Paragraph with background-color, color and padding properties.</p>
</body>
</html>padding: 20px 40px imposta 20 px in alto e in basso, 40 px a sinistra e a destra — un modo compatto per applicare spaziatura simmetrica.
Valori
| Valore | Descrizione |
|---|---|
length | Una dimensione fissa in qualsiasi unità di lunghezza CSS: px, em, rem, pt, cm, ecc. Il valore predefinito è 0. |
% | Una percentuale della larghezza del blocco contenitore (si applica a tutti e quattro i lati). |
initial | Reimposta la proprietà al suo valore predefinito (0). |
inherit | Eredita il valore calcolato dall'elemento genitore. |
Proprietà logiche (compatibili con la modalità di scrittura)
Per layout internazionalizzati che supportano testo verticale o da destra a sinistra, i lati fisici padding-top/right/bottom/left possono risultare inadeguati. CSS fornisce proprietà logiche che rispettano la direzione di scrittura:
| Proprietà logica | Corrisponde a in LTR orizzontale |
|---|---|
padding-block-start | padding-top |
padding-block-end | padding-bottom |
padding-inline-start | padding-left |
padding-inline-end | padding-right |
Le shorthand equivalenti sono padding-block e padding-inline.
/* Equivalent to padding-top + padding-bottom */
padding-block: 16px;
/* Equivalent to padding-left + padding-right */
padding-inline: 24px;Queste sono supportate in tutti i browser moderni e sono preferite nelle librerie di componenti che supportano testo bidirezionale.
Casi d'uso comuni e avvertenze
Area cliccabile. Poiché il padding fa parte della regione di sfondo e di cattura degli eventi dell'elemento, aumentarlo su un pulsante o un link rende il bersaglio più facile da toccare — un vantaggio diretto per l'usabilità mobile.
Padding sugli elementi inline. Il padding orizzontale sugli elementi inline (come <span>) funziona come previsto. Il padding verticale viene applicato visivamente ma non spinge le righe circostanti; usa un elemento block o inline-block se hai bisogno di ritmo verticale.
Padding vs. margin. Usa il padding quando vuoi che il colore di sfondo o il bordo copra lo spazio aggiuntivo. Usa margin quando lo spazio deve essere trasparente e al di fuori del bordo.
Interazione con box-sizing. Con content-box, aggiungere padding rende l'elemento visivamente più grande. Con border-box, il padding viene assorbito all'interno della larghezza dichiarata, mantenendo il layout prevedibile. Consulta box-sizing.
Tabelle. La shorthand padding non ha effetto sulle righe di tabella o sui gruppi di colonne. Usa padding sulle celle <td> e <th>, oppure usa border-spacing per gli spazi tra le celle.