Proprietà del foglio di stile CSS definire il design di una pagina Web mediante l'applicazione di tali proprietà a tag HTML specifici. Quando la proprietà padding è associata un tag cambia la spaziatura attorno agli elementi all'interno del tag. Spaziatura interna svolge un ruolo molto specifico all'interno di CSS e usato correttamente renderà il vostro HTML sia attraente e facile da modificare.
Imbottitura definito
La proprietà padding è parte del CSS "box model", che utilizza un sottoinsieme di proprietà per definire ogni elemento come un contenitore all'interno di una pagina Web. Anche il testo è contenuto all'interno di una scatola CSS. La proprietà padding definisce la quantità di spazio intorno al contenuto della scatola. Quando si modifica la proprietà padding per una casella, può crescere o ridursi per permettere la quantità appropriata di imbottitura, dipendente da altre impostazioni e se le dimensioni della casella sono definita con altro codice CSS. Imbottitura è anche la proprietà che sposta la posizione del contenuto all'interno di una scatola.
Imbottitura vs margine
Imbottitura funzioni diversamente dalla proprietà margin, che definisce lo spazio tra la scatola e altre caselle. Si può essere tentati di utilizzare la proprietà padding per la spaziatura, e quando una finestra è trasparente l'effetto può essere lo stesso. Tuttavia, questo può causare problemi se successivamente si aggiungono uno sfondo o contorno alla casella. Coerentemente con l'imbottitura e la proprietà margin per le finalità previste, è avrai assicurarsi che il codice CSS sarà più facile da modificare quando necessario.
Mediante la spaziatura
La proprietà padding utilizza variabili per descrivere entrambi i lati del contenuto su cui applicare l'imbottitura e la quantità di riempimento. Il formato più comune per descrivere il riempimento consiste nell'utilizzare quattro numeri, che rappresenta il superiore, destro, inferiore e sinistra della casella. Il seguente codice CSS vale 10 pixel di riempimento sopra e sotto il contenuto di ogni tag < p > e 20 pixel di imbottitura per i lati destro e sinistro:
p {padding: 10px 20px 10px 20px}
La quantità di riempimento può essere espressa in qualsiasi formato di misurazione di CSS, più comunemente in pixel o come percentuale.
Variazioni
Per applicare imbottitura a un solo lato, utilizzare la proprietà primaria imbottitura con le variabili appropriate o la proprietà padding specifico per quel lato: imbottitura-top, padding-bottom, padding-left o spaziatura interna a destra. Utilizzando la proprietà padding con un unico numero applicherà una pari quantità di imbottitura a tutti i lati del contenuto:
Imbottitura: 25px
Utilizzando due numeri applicherà il primo valore alla parte superiore e inferiore e il secondo valore a sinistra e a destra:
Imbottitura: 25px 10px
Utilizzando tre numeri si applicherà il primo valore alto, il secondo valore da entrambi i lati e il terzo verso il basso:
Imbottitura: 25px 10px 15px