La paddingproprietà in CSS definisce la parte più interna del box model, creando spazio attorno al contenuto di un elemento, all'interno di eventuali margini e / o bordi definiti.
I valori di riempimento vengono impostati utilizzando lunghezze o percentuali e non possono accettare valori negativi. Il valore iniziale o predefinito per tutte le proprietà di riempimento è 0.
Ecco un semplice esempio:
.box ( padding: 0 1.5em 0 1.5em; )L'esempio sopra utilizza la paddingproprietà shorthand, che accetta fino a quattro valori, mostrati qui:
.box ( padding: || || || )Se vengono impostati meno di quattro valori, i valori mancanti vengono presunti in base a quelli definiti. Ad esempio, le due serie di regole seguenti otterrebbero risultati identici:
.box ( padding: 0 1.5em; ) .box ( padding: 0 1.5em 0 1.5em; )Pertanto, se viene definito un solo valore, vengono impostate tutte e quattro le proprietà di riempimento sullo stesso valore:
.box ( padding: 20px; )Se vengono dichiarati tre valori, lo è padding: (top) (left-and-right) (bottom);.
Qualsiasi singola proprietà di riempimento può essere dichiarata usando il longhand, nel qual caso definiresti solo un valore per proprietà. Quindi l'esempio precedente potrebbe essere riscritto come segue:
.box ( padding-top: 20px; padding-right: 20px; padding-bottom: 20px; padding-left: 20px; )Calcoli di riempimento e larghezza degli elementi
Se un elemento ha una larghezza specificata, qualsiasi riempimento aggiunto a quell'elemento si aggiungerà alla larghezza totale dell'elemento. Questo è spesso un risultato indesiderato, poiché richiede che la larghezza di un elemento venga ricalcolata ogni volta che il riempimento viene regolato. (Notare che ciò accade anche con l'altezza, ma nella maggior parte dei casi è preferibile non dare a un elemento un'altezza impostata.)
Per esempio:
.box ( padding: 20px; width: 400px; )In questo esempio, sebbene .boxall'elemento venga assegnata una larghezza esplicita di 400 px, la larghezza effettiva di rendering dell'elemento sulla pagina sarà di 440 px. Questo tiene conto non solo della larghezza di 400px, ma anche di 20px del padding sinistro e di 20px del padding destro (definito con abbreviazione di padding nell'esempio precedente).
Ciò accade per mantenere 400 px di spazio contenuto, anziché 400 px della larghezza totale dell'elemento. Ecco una penna che lo dimostra:
Ciò si verifica in tutti i browser in uso, in modalità standard, ma non si verifica in IE6 e IE7 in modalità quirks (ovvero, nelle pagine visualizzate in IE6 o IE7 dove non è dichiarato alcun doctype o dove sta accadendo qualcos'altro per attivare stranezze modalità).
Per risolvere questo problema, mantenendo così la larghezza a 400px indipendentemente dalla quantità di riempimento, puoi utilizzare la box-sizingproprietà:
.box ( padding: 20px; width: 400px; box-sizing: border-box; )Ciò fa sì che l'elemento mantenga la sua larghezza aumentando il riempimento, riducendo così lo spazio di contenuto disponibile. Ecco una dimostrazione:
Supporto browser
| Cromo | Safari | Firefox | musica lirica | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Sì | Sì | Sì | Sì | Sì | Sì | Sì |