CSS -polstring vs. Margin

Innen HTML trenger vi CSS for å style websider enten dynamisk eller statisk. CSS -styling gir siden vår en estetisk visning. Estetikken til enhver webside avhenger sterkt av marginene og paddingsene som brukes i CSS -styling. Polstring refererer til plassen gitt av en polstringsegenskap til ethvert spesifikt element til grensen. Mens marginen refererer til rommet mellom det ene elementgrensen angående den andre elementgrensen eller sidens øverste, sideens bunn, siden er venstre og siden til siden. Hvis du ikke vet forskjellen mellom marginegenskapen og polstringsegenskapen til CSS i HTML, vil denne artikkelen hjelpe deg mye for å få grunnleggende kunnskap.

Eksempel # 01:

La oss komme i gang med det første eksemplet på å bruke HTML -eksemplene for å utdype forskjellen mellom marginegenskapen og polstringseiendommen. Vi vil først se bruken av margineiendommer. Så vi må danne en ny HTML -fil med "HTML" -utvidelsen. Vi må åpne det innenfor ethvert programmeringsverktøy som Visual Studio Code. Vi har startet HTML -koden med "HTML" -merket som vil bli avsluttet på den siste av alle taggene. Etter starten av HTML -taggen har vi satt i gang hodemerket for å legge de andre relaterte kodene i den.

Vi har lagt til tittelkoden i den for å lage en ny tittel for HTML -websiden vår (i.e., Margin.) Etter tittelkoden har vi lagt til "Style" -koden i hodemerket til denne HTML -filen som har blitt brukt til å style HTML -websiden. Vi vil ha en skikkelse på stilens taggen etter utdyping av en kroppskode. Vi har brukt "Body" -merket etter at hodetittelen er stengt. Kroppskoden inneholder 2 overskriftskoder for den "1." største overskriften (i.e. H1.) Disse overskriftene inneholder forskjellige titler i dem som vist nedenfor. Vi har spesifisert to forskjellige klasser for både overskriftene separat for P1 og P2. P1- og P2 -klasser vil bli brukt til å style henholdsvis 1. og 2. overskrift på forskjellige formater for styling.

Body -taggen sammen med den viktigste HTML -taggen ble stengt her som du kan se i det visuelle studiokodebildet. Vi har brukt P1- og P2 -klassene her for å style begge overskriftene separat. Vi har brukt grenseeiendommen for å legge til de 2 piksler solide blå kant rundt begge overskriftene. Marginegenskapen har blitt brukt her for å legge til marginer på 100 piksler for overskrift 1 fra alle sider og for å legge til marginer på 50 piksler for overskrift 2 fra alle sider. Koden for HTML -siden er fullført for å vise bruken av marginegenskapen. La oss lagre den først og deretter kjøre den i en nettleser. Du kan velge hvilken som helst nettleser etter eget valg (i.e., Chrome, Mozilla, Opera og etc.)

Etter å ha kjørt denne filen direkte i Google Chrome -nettleseren, har vi resultatet nedenfor. Den viste de to overskriftene med størrelse “1” på websidenes skjerm med en blå solid kant. Ettersom vi har brukt marginegenskapen på begge overskriftene, har den første overskriften grensen vært lokalisert 100 piksler langt fra sidetoppen, nederst, venstre og høyre. Den andre overskriften er også 50 piksler langt fra venstre, høyre, bunn og topp (i forhold til overskrift 1). Slik kan en margin gjøre et rom mellom grensen til en elementgrense til en annen.

La oss oppdatere den samme HTML -koden litt for å gi noe mangfoldig utseende til HTML -siden. Vi har brukt den samme filen med tittelen “Margin” som vist nedenfor. Stilemerket er startet etter slutten av en tittelkode. Vi har brukt klasse P1 for overskrift 1 og P2 for overskrift 2. Innenfor padmargin.HTML -fil, vi har brukt begge klasser P1 og P2 i stylingen. Vi har tildelt samme verdi av en solid blå kant for overskrifter som vi gjorde i illustrasjonen ovenfor. Etter dette har vi spesifisert toppmargin- og nederste marginegenskaper for den første overskriften i størrelse 1 og ga begge eiendommene en 50 piksler verdi. Etter det har vi spesifisert venstre margin og høyre marginrom på 30 piksler til overskriften 2 i størrelse “1”. Dette betyr at det vil være mindre plass til venstre og høyre for en overskrift sammenlignet med topp- og bunnmarginene. La oss lagre denne koden som skal kjøres.

Etter å ha utført HTML -filen i Visual Studio og åpnet den i Chrome -nettleseren, er resultatet blitt vist. Den første overskriften inneholder marginen på 50 piksler fra topp og bunn mens den andre overskriften inneholder venstre og høyre 30 prosent margin i forhold til denne siden og overskriften ovenfor. Slik kan margin brukes på forskjellige tagger.

Eksempel # 02:

Vi vil se på polstringen sammenlignet med marginene. Vi har brukt de to overskriftene i størrelse 1 innenfor kroppskoden til denne filen som starter med deres spesifiserte klassenavn, P1 og P2. Før bruken av kroppskoden bruker vi hodemerket i denne HTML -filen. Denne taggen inneholder tittelen og stilkoden i den. Tittelen er gitt for å navngi HTML -siden som margin. Stilmerket brukes til å bruke CSS på HTML -elementene. Vi har brukt 2-pikselblå kant på begge overskriftene i kroppskoden. Vi har også brukt 10 prosent margin på alle sidene av en overskrift med en klasse P1 mens 10 prosent polstring til den andre overskriften som inneholder klasse P2. Vi har gjort det så langt for å sjekke forskjellen mellom margin- og polstringsoppdateringer på overskriftene separat i samme fil.

Etter å ha lagret denne HTML -koden, har vi kjørt den på Visual Studio -koden. Denne filen vil bli utført i Google Chrome -nettleseren. For å se resultatet har vi utdataene nedenfor. Forskjellen mellom marginegenskapen og polstringsegenskapen til CSS har vært klar. Den første overskriften inneholder 10 prosent margin av grensen til resten av siden. Mens polstringen får 10 prosent plass mellom overskriften og grensen.

Konklusjon:

Vi har forklart forskjellen mellom margin- og polstringsegenskapene til CSS -styling i HTML. Den viser at polstringen er mellom grensen og elementet mens margen er mellom grensen og resten av siden. Det første eksemplet har vært å demonstrere bruken av marginer veldig tydelig, mens det siste eksemplet har vist forskjellen i polstring angående marginer.