Marginegenskaper i CSS forklart

Marginer er mellomrommene som er opprettet (for bedre estetikk) rundt ethvert element. Marginen settes automatisk av nettleseren som brukes. Imidlertid kan de brukerdefinerte marginene opprettes ved hjelp av CSS-marginegenskapen. Marginene har fire sider (vanligvis avhenger det av elementet), og marginen til hver side kan settes ved hjelp av marginegenskapen.

Marginegenskapen gjør det mulig å stille marginene til sidene individuelt, eller man kan lage marginer for flere sider samtidig. I denne beskrivende guiden blir marginegenskapen i CSS forklart og har følgende læringsresultater.

• Arbeid av margineiendommer i CSS
• Arbeid av marginen Shorthand -eiendommen
• Bruk av marginegenskaper med eksempler

Hvordan margineiendom fungerer i CSS

Marginegenskaper i CSS kan jobbe under forskjellige omstendigheter der du enten må gi marginer til sidene (individuelt) eller gi marginer ved hjelp av Shorthand -eiendom (flere sider på en gang). Arbeidet i begge situasjoner er diskutert her.

Marginen kan gis til individuelle sider ved å bruke syntaks deretter.

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

Velgeren kan være et hvilket som helst element, mens verdien er tallet som brukes for å gi en spesifikk margingrense. Verdien kan brukes med flere måleenheter i.e., Auto, lengde (PX, CM, PT), Prosent (%) og arve (i henhold til foreldreklassen). PX er den absolutte målingen, mens EM, REM og prosentandel er de relative tiltakene og er bedre (sammenlignet med PX) som er egnet for responsive resultater.

Bortsett fra disse individuelle sides marginene, kan marginen Shorthand -eiendommen også brukes til å gi marginene til flere sider samtidig. Syntaksen til marginskortegenskapen er gitt nedenfor:

velger margin: verdi1 Value2 Value3 Value;

Verdien1, verdi2, verdi3 og verdi 4 representerer topp-, høyre-, bunn- og venstre side av et element.

Hvordan bruke marginegenskaper i CSS

Denne delen gir noen få eksempler som viser bruken av marginegenskaper i CSS.

Eksempel 1: Å gi marginer til individuelle sider
I dette eksemplet brukes koden skrevet nedenfor for å gi marginer til individuelle sider.

Marginegenskaper i CSS

Bruker margin til høyre på 5px
Bruke marginbunnen på 5px
ved hjelp av marginoppen på 5px
Bruker margin igjen av 5px

Beskrivelsen av koden er gitt nedenfor

• En CSS -styling for Div's er definert ved å gi bredde, float -eiendom og grense
• Fire CSS -klasser er opprettet kalt “Top”, “Rig”, “Bot” og “Lef” som inneholder marginen (5px) i hver klasse
• Disse fire klassene brukes inne i divisjonene (div)

Bildet av koden vises nedenfor

Produksjon:

Eksempel 2: Å gi marginer til flere sider samtidig
Eksemplet ovenfor ga marginene til de enkelte sidene. Følgende kode gir margin til flere sider samtidig

Marginegenskaper i CSS

Bruker margin på 5% på alle sider
Bruker 5% margin på topp/bunn og 10% på venstre/høyre
Bruke margin på 2 og 3EM til topp og nederst og 4EM til høyre/venstre
ved å bruke margin på henholdsvis 2,4,6,8 piksler på toppen, høyre, bunn, venstre venstre

Ovennevnte kode er beskrevet som

• Fire CSS -klasser er opprettet kalt “Sing”, “Doub”, “Trip” og “All”
• "Synd" -klassen gir margin på% til alle sider og "tvil" -klassen gir margin på 5% til topp/bunn og 10% til høyre/venstre
• "Tur" -klassen gir margin på 2M og 4EM for å toppe en bunn og 3EM til høyre/venstre side
• "All" -klassen gir margin på 2, 4, 6 og 8px til topp, høyre, bunn og venstre side

Bildet av koden vises nedenfor

Produksjon:

Fra eksemplene ovenfor ville du ha lært anvendeligheten av marginegenskaper i følgende sammenhenger:

• Bruke marginegenskaper på alle sider individuelt
• gir marginer ved hjelp av marginskortegenskapen

Konklusjon

Marginegenskapen i CSS praktiseres og gir marginer i henhold til brukerdefinerte egenskaper. Denne artikkelen demonstrerer arbeid og bruk av marginegenskaper i CSS. Marginegenskapen i CSS kan brukes til å gi marginer til hver side individuelt, og marginen Shorthand -eiendom kan brukes til å gi marginer til flere sider samtidig.