Padding -eiendom i CSS forklart

Polstring er eiendommen som brukes til å lage plass rundt innholdet i elementet (inne i grensen). Et element har fire sider, og padding -egenskapen lar deg generere plass rundt en bestemt side. Dessuten lar Padding Shorthand -eiendommen deg skape plass rundt flere sider samtidig.

Polstring og marginer er sammenkoblede fenomener, da begge egenskapene har en tendens til å skape plass rundt elementene. Forskjellen er imidlertid at polstring skaper plass innenfor grenser, og margin legger opp plass utenfor grensen. Dette informative innlegget beskriver arbeid og bruk av polstringseiendommer i CSS.

Hvordan polstringseiendommer i CSS fungerer

Hovedformålet med padding -egenskapen er å legge til plass rundt elementene. Polstringen kan brukes på en av følgende måter:

Bruke polstringseiendom på sider individuelt

Polstringen kan gis til individuelle sider ved å utstede følgende syntaks:

velger padding-top: verdi; // på oversiden
velger padding-høyre: verdi; // på høyre side
velger padding-bottom: verdi; // på bunnsiden
velger padding-venstre: verdi; // på venstre side

Forekomstene av syntaks ovenfor er beskrevet nedenfor:

• Valg er et element eller kan referere til CSS -klasse
• Padding-top, polstring-høyre, padding-bottom og padding-venstre representerer polstringssidene
• verdien definerer plassen som vil bli gitt, og verdien kan ha en måleenhet i.e., Lengde (PX, CM, REM, EM), %(prosent i henhold til elementet), Auto (som definert av nettleseren).

Merk: Verdiene målt i PX er absolutte (faste) mens verdiene i %, REM og EM brukes til respons og justeres automatisk.

Bruke polstring av shorthand -eiendommer

Padding Shorthand -egenskapen kan brukes til å legge plass til forskjellige sider samtidig. Følgende syntaks praktiseres ved hjelp av Padding Shorthand -egenskapen i CSS.

Velger padding: verdi1 Value2 Value3 Value4;

I syntaks ovenfor representerer verdien1, verdi2, verdi3 og verdi4 topp, høyre, bunn, bunn og venstre side av elementet.

Hvordan du bruker polstringseiendom i CSS

Denne delen består av forskjellige eksempler som definerer bruken av padding -egenskap i CSS.

Eksempel 1: Bruke padding -egenskap på individuelle sider
Følgende kode praktiserer padding -egenskapen på alle sidene individuelt.

Padding eiendom i CSS

Bruke polstringstoppen i PX

Bruker polstrings-høyre i EM

Bruker padding-bottom i %

Bruker padding-venstre i PX

Beskrivelsen av koden er gitt nedenfor

• Bredden på alle avsnitt vil være "fit-content" for bedre å få forståelse av polstring
• Fire CSS-klasser kalt "Top", "Rig", "Bot" og "Lef" refererer til padding-top, padding-høyre, padding-bottom og padding-venstre egenskaper
• "Topp" og "Lef" -klassene bruker "PX" som måleenhet for polstring der som "rigg" og "bot" -klasser øver "EM" og "%" som en måleenhet for polstring
• De fire avsnittene bruker CSS -klassene for å implementere polstring på disse avsnittene

Bildet av koden vises her

Produksjon

Eksempel 2: Bruke padding -egenskap på flere sider samtidig
Padding Shorthand -egenskapen lar deg legge til polstring til flere sider samtidig, og her praktiseres den ved hjelp av følgende kode.

Padding eiendom i CSS

Bruke polstring i PX

Bruke polstring 3% til topp/bunn og 6% på venstre/høyre

Bruke polstring 2M til topp/bunn og 3EM til høyre/venstre

Bruke polstringen 5px til alle sider

Hopp over polstringseiendommen på venstre side

Beskrivelsen av koden er gitt nedenfor

• Definerte forskjellige stiler som bakgrunnsfarge, bredde og grensestil for alle avsnitt
• Fem CSS -klasser brukes kalt “All”, “Trio”, “Duo”, “Nano” og “Skip”.
• "All" -klassen tillater å legge til forskjellige polstringsverdier til alle sider
• "Trio" -klassen tilfører polstringsverdi 3% til topp/bunn og 6% til høyre/venstre
• "Duoen" -klassen tillater polstringseiendommen på topp/bunn med 2M og til høyre/venstre av 3EM
• "Nano" vil legge til polstringsverdi 5px til alle sidene
• "Skip" -klassen legger polstring til de tre sidene, og den vil hoppe over venstre side (ettersom verdien er 0 i ovennevnte CSS -klasse) til sidene.

Merk: Bortsett fra å hoppe over polstringen på venstre side, kan enhver annen side hoppes over ved å bruke 0 verdi på stedet.

Bildet av koden vises nedenfor

Produksjon

Fra output kan konseptet med polstringseiendommer i forskjellige scenarier oppnås.

Ovennevnte eksempler gjør at du kan lære funksjonaliteten til polstringen i følgende sammenhenger:

• Bruker padding -egenskap på hver side individuelt
• Bruke padding -egenskap med forskjellige måleverdier (PX, % og EM)
• Bruke polstring Shorthand -eiendom for å legge til polstring på flere sider samtidig eller hoppe over hvilken som helst side

Konklusjon

Polstringen er eiendommen som brukes til å skape plass rundt et element. Polstringen kan gis til individuelle sider ved bruk av, polstring, polstring-høyre, padding-bottom og padding-venstre. Dette informative innlegget opplyser arbeidsmekanismen og bruken av padding -eiendommer i CSS. Videre har vi også gitt tips for å jobbe med polstring av korthåndsegenskap som inneholder den kombinerte effekten av polstringstopp/høyre/nederst/venstre og brukes på flere sider samtidig.