Cascading Style Sheet proprietà definiscono il design di una pagina Web mediante l'applicazione di tali proprietà a specifici tag HTML. Quando la proprietà padding è associato a un tag cambia la spaziatura attorno agli elementi all'interno del tag. Imbottitura gioca un ruolo molto specifico all'interno CSS, e usato correttamente renderà il codice HTML sia attraente e facile da modificare.

imbottitura Definito

La proprietà padding fa parte del "box model," CSS che utilizza un sottoinsieme di proprietà per definire ogni elemento come una scatola all'interno di una pagina Web. Anche il testo è contenuto all'interno di una scatola di CSS. La proprietà padding definisce la quantità di spazio intorno al contenuto della scatola. Quando si modifica la proprietà padding per una scatola, si può aumentare o ridurre per consentire la giusta quantità di imbottitura, dipende da altre impostazioni e se il formato della scatola è definita con altro codice CSS. Padding è anche la proprietà che sposta la posizione del contenuto all'interno di una scatola.

Imbottitura vs. Margine

funzioni Padding diverso dalla proprietà margine, 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 scatola è trasparente l'effetto può lo stesso aspetto. Tuttavia, questo può causare problemi se si aggiunge poi un contorno o di sfondo alla scatola. In modo coerente con le proprietà padding e dei margini per lo scopo previsto, il candidato dovrà garantire che il codice CSS sarà più facile da regolare in caso di necessità.

utilizzando Imbottitura

La proprietà padding utilizza variabili per descrivere sia la quantità di imbottitura e lati del contenuto su cui applicare l'imbottitura. Il formato più comune per descrivere imbottitura è quello di utilizzare quattro numeri, che rappresenta l'alto, a destra, in basso ea sinistra della scatola. Il codice CSS che segue vale 10 pixel di imbottitura sopra e sotto il contenuto di ogni tag <p> e 20 pixel di padding ai lati destro e sinistro:

p {padding: 10px 20px 10px 20px}

La quantità di riempimento può essere espresso in qualsiasi formato misura CSS, più comunemente in pixel o in percentuale.

variazioni

Per applicare imbottitura per un solo lato, utilizzare la proprietà padding primaria con le variabili appropriate o la proprietà specifica imbottitura per quel lato: padding-top, padding-bottom, padding-left o padding-right. Usando la proprietà padding con un singolo numero verrà applicato un importo pari di imbottitura a tutte le parti del contenuto:

padding: 25px

Utilizzando due numeri si applica il primo valore alla parte superiore e inferiore e il secondo valore a sinistra ea destra:

padding: 25px 10px

Utilizzando tre numeri si applica il primo valore all'inizio, il secondo valore di entrambi i lati e la terza verso il basso:

padding: 25px 10px 15px