Il riempimento CSS è una delle proprietà del Modello di scatola CSS. Questa proprietà abbreviata imposta il riempimento attorno a tutti e quattro i lati di un elemento HTML. Il riempimento CSS può essere applicato a quasi tutti tag HTML (ad eccezione di alcuni tag della tabella). Inoltre, tutti e quattro i lati dell'elemento possono avere un valore diverso.
Proprietà di riempimento CSS
Per usare la proprietà abbreviata CSS padding, puoi usare il mnemonico "TRouBLe" (o "TRIBbLe" per i tuoi fan di Star Trek). Questo sta per superiore, giusto, parte inferiore, e sinistra, e si riferisce all'ordine delle larghezze di spaziatura impostate nella proprietà shorthand. Per esempio:
imbottitura: in alto a destra in basso a sinistra;
imbottitura: 1px 2px 3px 6px;
Se usassi i valori sopra elencati, applicherebbe un valore di riempimento diverso a ogni lato di qualsiasi elemento HTML a cui lo stai applicando. Se vuoi applicare la stessa imbottitura su tutti e quattro i lati, puoi semplificare il tuo CSS e scrivi solo un valore:
imbottitura: 12px;
Con quella linea di CSS, 12 pixel di padding si applicherebbero a tutti e 4 i lati dell'elemento.
Se vuoi che il riempimento sia lo stesso per la parte superiore e inferiore e sinistra e destra, puoi scrivere due valori:
imbottitura: 24px 48px;
Il primo valore (24px) si applicherebbe alla parte superiore e inferiore, mentre il secondo verrebbe applicato a sinistra ea destra.
Se scrivi tre valori, ciò renderà lo stesso riempimento orizzontale (sinistra e destra), mentre cambi la parte superiore e inferiore:
imbottitura: in alto a destra e in basso a sinistra;
imbottitura: 0px 1px 3px;
Secondo il modello box CSS, il padding è il più vicino all'elemento/contenuto stesso. Ciò significa che il riempimento viene aggiunto a un elemento compreso tra la larghezza o l'altezza del contenuto e qualsiasi valore del bordo utilizzato. Se il padding è impostato su zero, ha lo stesso bordo del contenuto.
Valori di riempimento CSS
Il riempimento CSS può assumere qualsiasi valore di lunghezza non negativo. Assicurati di specificare la misura, come px o em. Puoi anche specificare una percentuale per il tuo padding, che sarà una percentuale della larghezza del blocco contenitore dell'elemento. Ciò include l'imbottitura superiore e inferiore. Per esempio:
#contenitore {larghezza: 800px; altezza: 200px; }
#contenitore p { larghezza: 400 px; altezza: 75%; imbottitura: 25% 0; }
Il altezza del paragrafo all'interno del #contenitore l'elemento sarà il 75% del #contenitorel'altezza più il 25% della larghezza per l'imbottitura superiore e il 25% della larghezza per l'imbottitura inferiore. Questo ammonta a 300 + 200 + 200 = 700 px.
Effetti dell'aggiunta di riempimento CSS
Sopra elementi a livello di blocco, l'imbottitura è applicata sui quattro lati. Poiché l'elemento è già un blocco o una scatola, l'imbottitura viene applicata ai lati della scatola.
Quando viene aggiunto il riempimento CSS a elementi in linea, potrebbe esserci qualche sovrapposizione di elementi sopra e sotto l'elemento in linea se il riempimento verticale supera l'altezza della linea, ma non spingerà l'altezza della linea verso il basso. Il riempimento CSS orizzontale applicato agli elementi in linea verrà aggiunto all'inizio dell'elemento e alla fine dell'elemento. E l'imbottitura può avvolgere le linee. Ma non si applicherà a tutte le righe di un elemento multilinea, quindi non è possibile utilizzare il riempimento per indentare un segmento di contenuto in linea multilinea.
Inoltre, in CSS2.1, non puoi creare blocchi contenitore in cui la larghezza dipende da un elemento con percentuali per le larghezze (o larghezze di riempimento). Se lo fai il risultato è indefinito. I browser continueranno a visualizzare i contenuti, ma potresti non ottenere i risultati che ti aspetti. Se ci pensi, ha senso, come se il tuo elemento contenitore avesse bisogno di conoscere la larghezza dei suoi elementi figli per definire la sua larghezza, come quando non ha una larghezza predefinita, e uno o più ha una larghezza impostata come percentuale dell'elemento contenitore, si configura una catena circolare senza risposta. Se usi le percentuali per le larghezze di qualsiasi cosa sul tuo documento, dovresti assicurarti che anche le larghezze dell'elemento padre siano definite.