Top imbottitura CSS

“Hai mai sentito parlare del concetto di imbottitura durante lo studio della programmazione HTML nei tuoi studi? In caso contrario, allora sei nel posto giusto. HTML si riferisce al "linguaggio di markup hyper text" e viene utilizzato per dare ai siti Web un look stabile. Ha elaborato lo stile CSS menzionato come il "foglio di stile a cascata."Il CSS offre al sito un aspetto visivo accattivante. Lo stile CSS può essere utilizzato per fornire a un sito Web un nuovo aspetto e una sensazione, come la spaziatura a sinistra o a destra, applicando un colore di sfondo, dividendo la pagina in segmenti e così via. Una delle caratteristiche di CSS è "imbottitura", che viene utilizzata per aggiungere spazio tra il contenuto dell'elemento e il bordo. L'articolo di oggi coprirà l'uso della funzione di imbottitura CSS nello script in stile CSS mentre crei una pagina HTML statica. Quindi, iniziamo con alcuni dei semplici esempi di HTML."

Esempio # 01

Prendiamo il nostro primo esempio di HTML per creare una pagina statica con alcune intestazioni e modellarle con l'aiuto di uno stile CSS nel codice Visual Studio. Quindi, abbiamo creato un nuovo file di blocco note chiamato "imbottitura" con l'estensione "HTML" alla sua fine. Abbiamo avviato questo documento "HTML" con il tag "HTML" richiesto per far funzionare il file HTML. Il tag principale di questo documento contiene il tag "Titolo" insieme al suo titolo "Top Pagging", come visualizzato. Discuteremo il tag "stile" alla fine. Il tag del corpo verrà avviato con l'uso di 4 tag di intestazione.

Tutti questi titoli saranno 1^st Intestazioni, io.e., La più grande intestazione di dimensioni secondo HTML. Tutte le intestazioni conterranno diversi titoli di intestazione specificati al suo interno. Abbiamo specificato tre diverse classi per le ultime tre titoli, i.e., P1, P2 e P3. Queste classi verranno utilizzate nel tag di stile per specificare lo styling per ogni intestazione separatamente. Il tag corpo e HTML è stato concluso qui dopo l'uso delle intestazioni. All'interno del tag di stile sopra il tag "corpo", abbiamo definito uno stile per ogni classe di intestazione separatamente a tre righe, i.e., P1, P2, P3.

Abbiamo usato l'opzione bordo per impostare un bordo blu solido da 2 pixel per ogni intestazione, i.e., PX sta per Pixel. Abbiamo impostato qui la funzione di imbottitura per tutte e tre le intestazioni contenenti P1, P2 e P3 separatamente. La prima intestazione conterrà l'imbottitura da 100 pixel dalla parte superiore, la seconda intestazione conterrà l'imbottitura superiore da 50 pixel e l'ultima intestazione conterrà l'imbottitura superiore da 10 pixel dalla rispettiva intestazione sopra. Lo stile e il tag Head saranno completati qui e salveremo questo codice per eseguirlo utilizzando il pulsante "Esegui". Sarà aperto nel browser per vedere il suo risultato.

La seguente pagina di cima mostrata con il titolo "Top Padding" è stata aperta sullo schermo del browser. La prima intestazione è stata visualizzata senza bordo e imbottitura, i.e., Intestazione normale. Mentre il 2^nd, 3 ° e 4^th Le intestazioni contengono il bordo blu intorno a loro. Il 2^nd L'intestazione ha 100 pixel top imbottitura dal suo bordo, il 3^Rd L'intestazione contiene l'imbottitura di 50 pixel dal bordo e il 4^th L'intestazione contiene imbottitura di 10 pixel dal suo bordo blu. È possibile comprendere la varianza utilizzando i valori diversi per l'imbottitura tramite i "pixel."

Esempio # 02

Facciamo un altro esempio simile per aggiungere imbottitura nella parte superiore di qualsiasi aspetto HTML. Quindi, questa volta useremo l'opzione percentuale anziché Pixel. Questo file è stato avviato con il tag HTML seguito dal tag testa e titolo. La stessa etichetta è stata specificata in questo file. Abbiamo usato solo tre titoli all'interno del tag corporeo di questo file HTML. Tutte e tre le intestazioni contengono le stesse tre classi, P1, P2 e P3, da utilizzare nello stile.

All'interno del tag "stile", abbiamo usato le classi P1, P2 e P3 per ogni intestazione per modellarle separatamente. Abbiamo usato la stessa proprietà blu a blu solida da 2 pixel per tutte e tre le intestazioni. Successivamente, abbiamo usato la proprietà di imbottitura per impostare valori diversi per l'imbottitura delle intestazioni dai loro confini. La prima intestazione conterrà il 20 % di imbottitura superiore per il bordo. Il secondo sarà imbottito del 15 percento dalla parte superiore del suo confine, e l'ultima intestazione sarà del 5 % dal suo confine dal lato superiore. Salviamo questo programma ed eseguiamolo per vedere i risultati.

Dopo aver eseguito questo codice HTML per illustrare la proprietà di imbottitura con il valore numerico percentuale, abbiamo ottenuto l'output a livello mostrato sul browser Chrome. Questa pagina contiene un totale di 3 titoli con bordi solidi blu intorno a loro. Il primo contenuto di intestazione è il 20 percento di distanza dal suo confine, io.e., Impiegamento superiore del 20 %. La seconda intestazione è del 15 % dal confine che contiene, i.e., 15 % di imbottitura top. L'ultima intestazione contiene imbottitura superiore del 5 % dal suo bordo solido blu, come dimostrato nell'immagine sottostante. C'è una chiara differenza tra le intestazioni di output usando i diversi valori per l'imbottitura superiore.

L'unità "EM" può essere utilizzata anche per l'inserimento dell'imbottitura. L'unità "EM" può essere utilizzata per dare l'imbottitura all'elemento 2 volte la dimensione del contenuto dell'elemento. Diciamo che abbiamo gli stessi tre intestazioni nel corpo del file HTML e abbiamo usato i valori 5em, 3em e 1EM per la proprietà di imbottitura, come visualizzato di seguito.

L'output per l'uso dell'unità "EM" per aggiungere l'imbottitura superiore è stata mostrata di seguito. I 5EM, 3EM e 1EM sono valori relativamente più grandi delle unità "PX" e "%".

Esempio # 03

Facciamo l'ultimo esempio per dimostrare l'uso della proprietà di imbottitura nei file CSS o HTML. Quindi, faremo un confronto tra l'imbottitura e altre proprietà di imbottitura correlate come destra, sinistra e fondo. Abbiamo usato le intestazioni "H1" con un titolo di intestazione leggermente diverso, come mostrato nel tag corporeo di questo file HTML. All'interno del tag "stile", abbiamo definito le classi P1, P2 e P3 per ogni intestazione per impostare il valore del bordo e dell'imbottitura. Abbiamo usato lo stesso bordo blu solido da 1 pixel per tutte e tre le intestazioni.

Dopodiché, abbiamo usato i valori sinistro, destro, superiore e inferiore separatamente per ogni intestazione. In primo luogo, l'intestazione utilizzerà un imbottitura del 10% per tutti i lati, mentre la seconda intestazione contiene un imbottitura del 10% da tutti i lati. L'ultima intestazione conterrà l'imbottitura 2EM per tutti i lati.

L'output per il codice HTML ha mostrato l'imbottitura per ogni intestazione dall'alto, in basso, a sinistra e a destra del bordo.

Conclusione

L'introduzione di questo articolo riguarda l'uso dello stile CSS e l'uso della proprietà "imbottitura" all'interno del file HTML. Abbiamo dimostrato gli esempi contenenti l'uso della proprietà di imbottitura di CSS per aggiungere l'imbottitura dalla parte superiore di un elemento dal suo bordo. Per questo, abbiamo provato il "PX" per i pixel, "%" per percentuale e "EM" per la moltiplicazione di una dimensione dell'elemento con il valore specifico per aggiungere l'imbottitura. Gli esempi illustrati qui sono abbastanza semplici e facili da usare. Quindi, ogni principiante può adattarsi a questi esempi in qualsiasi momento.