CSS imbottitura è una delle proprietà del modello box CSS. Questa proprietà abbreviata imposta il riempimento attorno a tutti e quattro i lati di un elemento HTML. Il padding CSS può essere applicato a quasi tutti i tag HTML (ad eccezione di alcuni tag di tabella). Inoltre, tutti e quattro i lati dell'elemento possono avere un valore diverso.
Proprietà Padding CSS
Per usare la proprietà CSS padding di stenografia, puoi usare il mnemonico "TRouBLe" (o "TRiBbLe" per i fan di Star Trek). Questo rappresenta superiore, destra, parte inferiore, e sinistrae fa riferimento all'ordine delle larghezze di riempimento impostate nella proprietà di stenografia. Per esempio:
imbottitura: superiore destra in basso a sinistra; imbottitura: 1px 2px 3px 6px;
Se hai usato i valori sopra elencati, applicherebbe un valore di riempimento diverso a ogni lato dell'elemento HTML a cui lo stai applicando. Se vuoi applicare lo stesso padding su tutti e quattro i lati, puoi semplificare il tuo CSS e scrivere solo un valore:
imbottitura: 12px;
Con quella linea di CSS, 12 pixel di riempimento si applicano a tutti e 4 i lati dell'elemento.
Se si desidera che il riempimento sia lo stesso per l'alto e il basso, a sinistra ea destra, è possibile scrivere due valori:
imbottitura: 24px 48px;
Il primo valore (24px) si applicherebbe in alto e in basso, mentre il secondo si applicherebbe a sinistra ea destra.
Se scrivi tre valori, questo renderà lo stesso padding orizzontale (sinistro e destro), mentre modificherà la parte superiore e inferiore:
imbottitura: superiore destro e sinistro in basso; imbottitura: 0px 1px 3px;
Secondo il modello di box CSS, il riempimento è 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 del bordo che si utilizza. Se il padding è impostato su zero, ha lo stesso bordo del contenuto.
CSS Padding Values
Il padding 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 contenente l'elemento. Questo include per il rivestimento superiore e inferiore. Per esempio:
#container {width: 800px; altezza: 200 px; } #container p {width: 400px; altezza: 75%; imbottitura: 25% 0; }
L'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 = 700px.
Effetti dell'aggiunta di CSS Padding
Sugli elementi a livello di blocco, il padding viene applicato sui quattro lati. Poiché l'elemento è già un blocco o una scatola, il riempimento viene applicato ai lati della scatola.
Quando il riempimento CSS viene aggiunto 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 sposterà l'altezza della linea verso il basso. Il riempimento CSS orizzontale applicato agli elementi inline verrà aggiunto all'inizio dell'elemento e alla fine dell'elemento. E l'imbottitura può avvolgere linee. Ma non si applica a tutte le linee di un elemento multi-linea, quindi non è possibile utilizzare il riempimento per indentare un segmento di contenuto in linea multi-linea.
Inoltre, in CSS2.1, non è possibile creare blocchi contenitore in cui la larghezza dipende da un elemento con percentuali per larghezza (o larghezza di riempimento). Se lo fai, il risultato non è definito. 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, imposta una catena circolare senza risposta. Se si utilizzano percentuali per la larghezza di qualsiasi cosa nel documento, è necessario assicurarsi che anche le larghezze dell'elemento genitore siano definite.
