Proprietà CSS padding-left
Come usare la proprietà CSS padding-left per definire lo spazio di padding a sinistra di un elemento. Valori e esempi.
La proprietà CSS padding-left imposta la larghezza dell'area di padding sul lato sinistro di un elemento. Il padding è lo spazio tra il contenuto di un elemento e il suo bordo — aumentare padding-left spinge il contenuto verso destra, lontano dal bordo sinistro, senza influenzare gli elementi vicini.
Questa pagina tratta la sintassi di padding-left, le unità e i valori parola chiave che accetta, come vengono calcolate le percentuali, come interagisce con la proprietà abbreviata padding e il box model, oltre ad esempi eseguibili.
Quando usare padding-left
Usa padding-left (invece della forma abbreviata padding) quando devi modificare un solo lato e vuoi mantenere la regola esplicita e facile da leggere — ad esempio, per indentare il testo di un elenco, distanziare un'etichetta da un'icona, oppure creare spazio respirabile a sinistra di una card.
Se stai impostando tutti e quattro i lati contemporaneamente, preferisci la forma abbreviata padding. Le proprietà per lato singolo — padding-left, padding-right, padding-top e padding-bottom — sono utili per sovrascrivere un solo valore dopo che una forma abbreviata ha impostato il resto.
Il padding non è il margin. Il padding si trova all'interno del bordo dell'elemento e condivide lo sfondo dell'elemento; margin-left aggiunge spazio fuori dal bordo ed è sempre trasparente. Per separare un elemento dal suo vicino usa il margin; per spingere il contenuto verso l'interno usa il padding.
I valori negativi non sono consentiti. A differenza dei margin, il padding non può mai essere negativo.
Sugli elementi inline come <span>, il padding orizzontale viene applicato (ed è visibile), ma non spinge le caselle di riga circostanti — quindi verticalmente sembra non avere effetto sul layout. Per un controllo completo, imposta l'elemento su display: inline-block oppure display: block.
Come padding-left influenza il box model
Per impostazione predefinita il browser usa il box model CSS standard, in cui la larghezza renderizzata di un elemento è la sua width più i padding sinistro e destro più i bordi. Quindi aggiungere padding-left: 100px rende l'elemento complessivamente 100px più largo.
Se vuoi che il padding sia incluso all'interno della width dichiarata invece di essere aggiunto ad essa, imposta box-sizing: border-box. Questa è la causa più comune del problema "il mio layout è andato in overflow quando ho aggiunto il padding" — border-box lo risolve.
| Valore iniziale | 0 |
|---|---|
| Si applica a | Tutti gli elementi, con un'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.paddingLeft = "40px"; |
Sintassi
Sintassi della proprietà CSS padding-left
padding-left: length | percentage | initial | inherit;Il valore è più spesso una lunghezza fissa (px, em, rem, cm, …) o una percentuale. Le percentuali vengono risolte rispetto alla larghezza del blocco contenitore — anche per il padding sinistro/destro e superiore/inferiore — quindi un padding percentuale reattivo si ridimensiona con la larghezza del contenitore.
Esempio con un valore in px
Un valore fisso in pixel è la scelta più prevedibile. Qui padding-left: 100px sposta il testo del paragrafo di 100px dal bordo sinistro:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-left: 100px;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Risultato
Esempio con un valore in cm
Qualsiasi unità di lunghezza assoluta funziona allo stesso modo. Qui il padding è espresso in centimetri:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 2px solid #000;
color: #1c87c9;
padding-left: 3cm;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Esempio con un valore percentuale
Una percentuale è relativa alla larghezza del blocco contenitore, quindi il rientro cresce e si riduce con il layout. Si noti che la forma abbreviata padding: 20px viene dichiarata prima e poi padding-left: 15% sovrascrive solo il lato sinistro:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p {
border: 3px solid #cccccc;
color: deepskyblue;
padding: 20px;
padding-left: 15%;
}
</style>
</head>
<body>
<h2>Padding-left property example</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
</body>
</html>Valori
| Valore | Descrizione | Prova |
|---|---|---|
| length | Imposta il padding sinistro come lunghezza fissa (px, pt, em, rem, cm, ecc.). Il valore predefinito è 0. Le lunghezze negative non sono valide. | Prova » |
| % | Imposta il padding sinistro come percentuale della larghezza del blocco contenitore. | Prova » |
| initial | Reimposta la proprietà al suo valore predefinito (0). | Prova » |
| inherit | Assume il valore calcolato di padding-left dell'elemento padre. (Il padding non viene ereditato per impostazione predefinita.) |
Proprietà correlate
padding— la forma abbreviata che imposta tutti e quattro i lati contemporaneamente.padding-right,padding-top,padding-bottom— le altre proprietà per lato singolo.margin-left— aggiunge spazio fuori dal bordo invece che all'interno.box-sizing— controlla se il padding viene aggiunto allawidthdell'elemento o è incluso in essa.display— influisce sul comportamento del padding orizzontale sugli elementi inline rispetto a quelli block.