Breve panoramica del CSS Padding

Lightcome / Getty Images

Il riempimento CSS è una delle proprietà di Modello a 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à di riempimento CSS scorciatoia, puoi usare il mnemonico TRouBLe (o TRiBbLe per i fan di Star Trek). Questo sta per superiore , Giusto , parte inferiore , e sinistra e fa riferimento all'ordine delle larghezze di riempimento impostate nella proprietà shorthand. Per esempio:

|_+_|

Se hai utilizzato i valori sopra elencati, applicherebbe un valore di riempimento diverso su 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:

|_+_|

Con quella linea di CSS, 12 pixel di riempimento 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:

|_+_|

Il primo valore (24px) si applicherebbe in alto e in basso, mentre il secondo si applicherebbe a sinistra ea destra.

Se scrivi tre valori, ciò renderà il riempimento orizzontale (sinistro e destro) lo stesso, mentre cambi la parte superiore e inferiore:

|_+_|

Secondo il modello CSS box, il padding è il più vicino all'elemento/contenuto stesso. Ciò significa che il riempimento viene aggiunto a un elemento tra la larghezza o l'altezza del contenuto e qualsiasi valore di bordo utilizzato. Se il riempimento è 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 riempimento, che sarà una percentuale della larghezza del blocco contenitore dell'elemento. Ciò include l'imbottitura superiore e inferiore. Per esempio:

|_+_|

Il altezza del paragrafo all'interno del #contenitore l'elemento sarà il 75% del #contenitore 's altezza più il 25% della larghezza per l'imbottitura superiore e il 25% della larghezza per l'imbottitura inferiore. Questo è un totale di 300 + 200 + 200 = 700px.

Effetti dell'aggiunta di CSS Padding

SU elementi a livello di blocco , l'imbottitura è applicata sui quattro lati. Poiché l'elemento è già un blocco o una scatola, il riempimento viene applicato ai lati della scatola.

Quando viene aggiunto il riempimento CSS a elementi in linea , potrebbe esserci una 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 inline verrà aggiunto all'inizio e alla fine dell'elemento. E l'imbottitura può avvolgere le linee. Ma non si applica a tutte le righe di un elemento a più righe, quindi non è possibile utilizzare il riempimento per indentare un segmento di contenuto inline a più righe.

Inoltre, in CSS2.1, non puoi creare blocchi contenitore in cui la larghezza dipende da un elemento con percentuali per 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 definirne la larghezza, ad esempio quando non ha una larghezza predefinita e uno o più ha una larghezza impostata come percentuale dell'elemento contenitore, questo imposta una catena circolare senza risposta. Se usi le percentuali per le larghezze di qualsiasi cosa nel tuo documento, dovresti assicurarti che anche le larghezze dell'elemento padre siano definite.