La proprietà di imbottitura in CSS ha spiegato
L'imbottitura e i margini sono fenomeni interconnessi poiché entrambe le proprietà tendono a creare spazio attorno agli elementi. Tuttavia, la differenza è che l'imbottitura crea spazio all'interno dei bordi e il margine aggiunge spazio fuori dal bordo. Questo post informativo descrive il lavoro e l'utilizzo della proprietà di imbottitura in CSS.
Come funziona la proprietà di imbottitura in CSS
Lo scopo principale della proprietà di imbottitura è aggiungere spazio attorno agli elementi. L'imbottitura può essere utilizzata in uno dei seguenti modi:
Utilizzo di proprietà di imbottitura sui lati individualmente
L'imbottitura può essere somministrata ai lati individuali emettendo la seguente sintassi:
Selettore imbottitura-top: valore; // sul lato superioreselettore imbottitura-right: value; // sul lato destro
selettore padding-bottom: value; // sul lato inferiore
selettore padding-left: value; // sul lato sinistro
Le istanze della sintassi sopra sono descritte di seguito:
- Il selettore è un elemento o può fare riferimento alla classe CSS
- L'imbottitura, l'imbottitura del destro, il fondo di imbottitura e l'imbottitura-sinistra rappresentano i lati di imbottitura
- Il valore definisce lo spazio che verrebbe fornito e il valore può avere un'unità di misurazione I.e., lunghezza (px, cm, rem, em), %(percentuale secondo l'elemento), auto (come definito dal browser).
Nota: I valori misurati in PX sono assoluti (fissi) mentre i valori in %, REM ed EM sono utilizzati per la reattività e sono adeguati automaticamente.
Utilizzo della proprietà di imbottitura shorthand
La proprietà di imbottitura shorthand può essere utilizzata per aggiungere spazio a vari lati contemporaneamente. La seguente sintassi viene praticata utilizzando la proprietà di imbottitura shorthand in CSS.
Selettore imbottitura: valore1 valore2 valori3 valori4;Nella sintassi sopra, Value1, Value2, Value3 e Value4 rappresentano il lato superiore, destro, in basso e sinistro dell'elemento.
Come utilizzare la proprietà di imbottitura in CSS
Questa sezione comprende vari esempi che definiscono l'uso della proprietà di imbottitura in CSS.
Esempio 1: utilizzando la proprietà di imbottitura sui singoli lati
Il codice seguente pratica la proprietà di imbottitura su tutti i lati individualmente.
Imbottitura di proprietà in CSS
Utilizzando l'imbottitura in PX
Usando l'imbottitura in destra in EM
Utilizzo del bottom di imbottitura in %
Utilizzando l'imbottitura in PX
La descrizione del codice è riportata di seguito
- La larghezza di tutti i paragrafi sarebbe "in forma" per ottenere meglio la comprensione dell'imbottitura
- Quattro classi CSS chiamate "top", "rig", "bot" e "LEF" si riferiscono a imbottitura, imbottitura-destra, imbottitura e proprietà di imbottitura
- Le classi "top" e "LEF" utilizzano la "PX" come unità di misurazione per l'imbottitura dove le classi "rig" e "bot" praticano "em" e "%" come unità di misurazione per l'imbottitura
- I quattro paragrafi utilizzano le classi CSS per implementare l'imbottitura su questi paragrafi
L'immagine del codice è mostrata qui
Produzione
Esempio 2: utilizzando la proprietà di imbottitura su più lati contemporaneamente
La proprietà di imbottitura shorthand consente di aggiungere imbottitura a più lati contemporaneamente e qui viene praticata utilizzando il seguente codice.
Imbottitura di proprietà in CSS
Usando l'imbottitura in PX
Utilizzando l'imbottitura del 3% in alto/in basso e il 6% a sinistra/destra
Utilizzo di imbottitura 2em in alto/in basso e 3em a destra/sinistra
Utilizzando l'imbottitura 5px su tutti i lati
Saltare la proprietà di imbottitura sul lato sinistro
La descrizione del codice è fornita di seguito
- vari stili definiti come colore di sfondo, larghezza e stile di confine per tutti i paragrafi
- Sono usate cinque classi CSS chiamate "All", "Trio", "Duo", "Nano" e "Skip".
- La classe "all" consente di aggiungere diversi valori di imbottitura a tutti i lati
- La classe "Trio" aggiunge un valore di imbottitura del 3% in alto/in basso e 6% a destra/sinistra
- La classe "duo" consente la proprietà di imbottitura in alto/in basso da 2em e a destra/sinistra da 3em
- Il "nano" aggiungerà un valore di imbottitura 5px a tutti i lati
- La classe "Skip" aggiunge imbottitura ai tre lati e salverebbe il lato sinistro (poiché il suo valore è 0 nella classe CSS sopra) ai lati.
Nota: Oltre a saltare l'imbottitura sul lato sinistro, qualsiasi altro lato può essere saltato utilizzando il valore 0 sul luogo.
L'immagine del codice è mostrata di seguito
Produzione
Dall'output di cui sopra, è possibile ottenere il concetto di imbottitura di proprietà in vari scenari.
Gli esempi di cui sopra consentono di apprendere la funzionalità dell'imbottitura nei seguenti contesti:
- Utilizzo della proprietà di imbottitura su ciascun lato individualmente
- Utilizzo della proprietà di imbottitura con vari valori di misurazione (Px, % ed EM)
- Utilizzo della proprietà di imbottitura shorthand per aggiungere imbottitura su più lati contemporaneamente o saltare qualsiasi lato
Conclusione
L'imbottitura è la proprietà utilizzata per creare spazio attorno a un elemento. L'imbottitura può essere fornita ai singoli lati utilizzando, imbottitura, imbottitura a destra, imbottitura e imbottitura a sinistra. Questo post informativo illumina il meccanismo di lavoro e l'utilizzo della proprietà di imbottitura in CSS. Inoltre, abbiamo anche fornito suggerimenti per lavorare sulla proprietà di imbottitura stenografia che contiene l'effetto combinato di imbottitura-top/destra/in basso/sinistra e viene applicato su più lati contemporaneamente.