CSS -polstringstopp

“Har du noen gang hørt om polstringskonseptet mens du studerer HTML -programmering i studiene dine? Hvis ikke, er du på rett sted. HTML refererer til “Hyper Text Markup Language” og brukes til å gi nettsteder et stabilt utseende. Det fulgte med CSS -stylingen som er nevnt som “Cascading Style Sheet.”CSS gir nettstedet et tiltalende visuelt utseende. CSS -styling kan brukes til å gi et nettsted et nytt utseende og følelse, for eksempel avstand til venstre eller høyre, bruke en bakgrunnsfarge, dele siden i segmenter, og så videre. En av CSSs funksjoner er "polstring", som brukes til å legge til mellomrom mellom elementinnholdet og grensen. Dagens artikkel vil dekke bruken av CSS Padding-Top-funksjonen i CSS-stilskriptet mens du oppretter en statisk HTML-side. Så la oss komme i gang med noen av de enkle eksemplene på HTML.”

Eksempel nr. 01

La oss ta vårt første eksempel på HTML for å lage en statisk side med noen overskrifter og style dem ved hjelp av en CSS -styling i den visuelle studiokoden. Så vi har laget en ny Notisblokkfil som heter "Padding-Top" med "HTML" -forlengelsen på slutten. Vi har startet dette "HTML" -dokumentet med "HTML" -koden som kreves for å få HTML -filen til å fungere. Hovedtaggen til dette dokumentet inneholder "tittel" -merket sammen med tittelen "Top Padding", som vist. Vi vil diskutere "stil" -merket på slutten. Body -taggen vil bli startet med bruk av 4 overskriftskoder.

Alle disse overskriftene vil være 1^st Overskrifter, i.e., den største størrelsen i henhold til HTML. Alle overskriftene vil inneholde forskjellige overskriftstitler som er spesifisert i dem. Vi har spesifisert tre forskjellige klasser for de tre siste overskriftene, i.e., P1, P2 og P3. Disse klassene vil bli brukt i stilkoden for å spesifisere stylingen for hver overskrift separat. Kroppen og HTML -taggen er avsluttet her etter bruk av overskrifter. Innenfor stilmerket over "Body" -merket har vi definert styling for hver overskriftsklasse separat på tre linjer, i.e., P1, P2, P3.

Vi har brukt grensealternativet til å sette en 2-piksel solid blå kant for hver overskrift, i.e., PX står for Pixel. Vi har satt inn poleting-toppfunksjonen her for alle de tre overskriftene som inneholder P1, P2 og P3 hver for seg. Den første overskriften vil inneholde 100-piksel-polstring fra toppen, den andre overskriften vil inneholde topppolstringen på 50 piksler, og den siste overskriften vil inneholde 10 piksler topp polstring fra den respektive overoverskriften. Stilen og hodemerket vil være fullført her, og vi lagrer denne koden for å kjøre den ved hjelp av "Kjør" -knappen. Det vil bli åpnet i nettleseren for å se resultatet.

Følgende vist-below-side med tittelen “Top Polpting” er åpnet på nettleserskjermen. Den første overskriften har blitt vist uten grense og polstring, i.e., Normal overskrift. Mens de 2^nd, 3. og 4^th Overskrifter inneholder den blå grensen rundt dem. De 2^nd Overskriften har fått 100 piksler topp polstring fra grensen, 3^Rd Overskriften inneholder 50-piksel-polstring fra grensen, og 4^th Overskriften inneholder 10-piksler polstring fra den blå kant. Du kan forstå variansen ved å bruke de ulikt verdiene for polstringstoppen via “Piksler.”

Eksempel # 02

La oss ha et annet lignende eksempel for å legge til polstring øverst i ethvert HTML -aspekt. Så vi vil bruke prosentandelet i stedet for piksel denne gangen. Denne filen er startet med HTML -taggen etterfulgt av hodet og tittelkoden. Den samme etiketten er spesifisert i denne filen. Vi har bare brukt tre overskrifter i Body -taggen til denne HTML -filen. Alle de tre overskriftene inneholder de samme tre klassene, P1, P2 og P3, for bruk i styling.

Innenfor "stil" -merket har vi brukt P1-, P2- og P3 -klassene for hver overskrift for å style dem separat. Vi har brukt den samme 2-piksel solide blå kantegenskapen for alle tre overskriftene. Etter det har vi brukt padding-top-egenskapen for å angi forskjellige verdier for polstring av overskrifter fra deres grenser. Den første overskriften vil inneholde 20 prosent topp polstring ved grensen. Den andre vil bli polstret 15 prosent fra toppen av grensen, og den siste overskriften vil være 5 prosent unna grensen fra oversiden. La oss lagre dette programmet og kjøre det for å se resultatene.

Etter å ha kjørt denne HTML-koden for å illustrere padding-top-egenskapen med den prosentvise numeriske verdien, har vi fått den vist-belowutgangen på Chrome-nettleseren. Denne siden inneholder totalt 3 overskrifter med blå solide grenser rundt seg. Det første overskriftinnholdet er 20 prosent unna grensen, jeg.e., 20 prosent topp polstring. Den andre overskriften er 15 prosent unna grensen den inneholder, i.e., 15 prosent topp polstring. Den siste overskriften inneholder 5 prosent topp polstring fra den blå solide kanten, som demonstrert på bildet nedenfor. Det er en klar forskjell mellom utgangsoverskriftene ved å bruke de forskjellige verdiene for topp polstring.

"EM" -enheten kan også brukes til innsetting av polstring. "EM" -enheten kan brukes til å gi polstring til elementet 2 ganger størrelsen på elementinnholdet. La oss si at vi har de samme tre overskriftene i kroppen til HTML-filen, og vi har brukt 5EM-, 3EM- og 1EM-verdiene for padding-top-egenskapen, som vist nedenfor.

Utgangen for bruk av "EM" -enheten for å legge til topp polstring er vist nedenfor. 5EM, 3EM og 1EM er relativt større verdier enn “PX” og “%” enhetene.

Eksempel # 03

La oss ha det siste eksemplet for å demonstrere bruken av padding-top-egenskapen i CSS- eller HTML-filer. Så vi vil gjøre en sammenligning mellom polstringstoppen og andre relaterte polstringsegenskaper som høyre, venstre og bunn. Vi har brukt "H1" -overskriftene med en litt annen overskriftstittel, som vist i kroppskoden til denne HTML -filen. Innenfor "stil" -merket har vi definert P1-, P2- og P3 -klassene for hver overskrift for å sette grensen og polstringsverdien. Vi har brukt den samme 1 piksel solide blå kant for alle tre overskriftene.

Etter det har vi brukt venstre, høyre, topp- og bunnverdier separat for hver overskrift. For det første vil overskriften bruke 10% polstring for alle sidene, mens den andre overskriften vil inneholde 10 prosent polstring fra alle sidene. Den siste overskriften vil inneholde 2M -polstring for alle sidene.

Utgangen for HTML -kode har vist polstring for hver overskrift fra toppen, nederst, venstre og høyre for grensen.

Konklusjon

Denne artikkelens introduksjon handler om bruk av CSS -styling og bruk av "polstring" -egenskapen i HTML -filen. Vi har demonstrert eksemplene som inneholder bruken av polstrings-toppen av CSS for å tilsette polstring fra toppen av et element fra grensen. For dette har vi prøvd “PX” for piksler, “%” for prosent og “EM” for multiplikasjon av en elementstørrelse med den spesifikke verdien for å legge til polstring. Eksemplene illustrert her er ganske enkle og enkle å bruke. Derfor kan enhver nybegynner tilpasse seg disse eksemplene når som helst.